日期:2014-05-17  浏览次数:20885 次

再问ajaxfileupload.js问题!!!20分
本帖最后由 chenyiya 于 2013-09-30 18:28:20 编辑
描述下情况:
ajax上传文件(图片),第一次选择图片后,能正常上传,但再点就没有反应,根本不进扩展。

$('#diaryuploadid').change(function(){
   $.ajaxFileUpload
   ({
url: myurl,
fileElementId:"diaryuploadid",
dataType: 'json',
secureuri:false, 
success: function (data, status)
{
// ...
},
error: function (data, status, e)
{  
   alert("上传图片失败!");
}
});
});

将源码一点点砍去,发现是createUploadForm的问题。看了下里面的代码,源码:
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

var oldElement = $('#' + fileElementId);
        var newElement = $(oldElement).clone();
        $(oldElement).attr('id', fileId);
        $(oldElement).before(newElement);
        $(oldElement).appendTo(form);
        
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
    },

说下我的理解,clone了input放入原位置,同时将原input修改id后放入创建的form,这个form在整个上传操作完成后被remove掉。我在想,是不是这个逻辑的问题,remove的是oldElement对象,或者说,remove拿掉了oldElement的所有事件,即使clone了newElement,但这个对象没事件了,以至于第一次之后就没反应。
改过这部分代码:

var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(newElement).attr('id', fileId);
$(newElement).appendTo(form);

拿clone出来的newElement放入form,这样ff正常,可以多次上传,ie和chrome就悲剧了,拿不到文件,也就是clone的时候,newElement里面没有同步clone文件过去。。。
求各位指导~!
多谢!
javascript ajax上传 ajaxfileupload

------解决方案--------------------
要是我就不把这个创建放到change里

你创建它一次就可以了,不需要每次change都重新创建一次啊

没看到哪里在上传之后remove的