描述下情况:
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的