我的html表单中有一个fileinput控件，一旦用户选择了图像，就会自动将图像上传到服务器：
<input id="uploadedfile" name="uploadedfile" type="file" class="file" />
我已将此事件附加到 $（文档）.ready
//uploader event
$('#uploadedfile').change(function(){
ajaxFileUpload();
});
//upload file
function ajaxFileUpload(){
$.ajaxFileUpload({
url:'upload.php',
secureuri:false,
fileElementId:'uploadedfile',
dataType: 'json',
success: function(data,status){
if(typeof(data.error) != 'undefined'){
if(data.error){
//print error
alert(data.error);
}else{
//clear
$('#img img').attr('src',url+'cache/'+data.msg);
}
}
},
error: function(data,status,e){
//print error
alert(e);
}
});
return false;
}
大问题是它仅适用于第一个文件选择。 fileinput的任何进一步选择都不会执行 ajaxFileUpload（）函数 - 但是，如果我用 .change（）中的alert（）替换ajaxFileUpload（）事件确实有效。
上传的额外方法（错误肯定不在此处）
jQuery.extend({
createUploadIframe: function(id,uri){
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject){
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean') {
io.src = 'javascript:false';
} else if(typeof uri== 'string') {
io.src = uri;
}
} else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io
},
createUploadForm: function(id,fileElementId){
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);
$(form).css('position','absolute');
$(form).css('top','-1200px');
$(form).css('left','-1200px');
$(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s){
s = jQuery.extend({},jQuery.ajaxSettings,s);
var id = new Date().getTime();
var form = jQuery.createUploadForm(id,s.fileElementId);
var io = jQuery.createUploadIframe(id,s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
if(s.global && ! jQuery.active++) {
jQuery.event.trigger('ajaxStart');
}
var requestDone = false;
var xml = {}
if(s.global)
jQuery.event.trigger('ajaxSend',[xml,s]);
var uploadCallback = function(isTimeout){
var io = document.getElementById(frameId);
try {
if(io.contentWindow) {
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
} else if(io.contentDocument) {
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
} catch(e) {
jQuery.handleError(s,xml,null,e);
}
if(xml || isTimeout == 'timeout') {
requestDone = true;
var status;
try {
status = isTimeout != 'timeout' ? 'success' : 'error';
if(status != 'error') {
var data = jQuery.uploadHttpData(xml,s.dataType);
if(s.success)
s.success(data,status);
if(s.global)
jQuery.event.trigger('ajaxSuccess',[xml,s]);
} else
jQuery.handleError(s,xml,status);
} catch(e) {
status = 'error';
jQuery.handleError(s,xml,status,e);
}
if(s.global)
jQuery.event.trigger('ajaxComplete',[xml,s]);
if(s.global && ! --jQuery.active)
jQuery.event.trigger('ajaxStop');
if(s.complete)
s.complete(xml,status);
jQuery(io).unbind();
setTimeout(function(){
try {
$(io).remove();
$(form).remove();
} catch(e) {
jQuery.handleError(s,xml,null,e);
}
},100);
xml = null;
}
}
if(s.timeout > 0) {
setTimeout(function(){
if(!requestDone) uploadCallback('timeout');
},s.timeout);
} try {
var form = $('#' + formId);
$(form).attr('action',s.url);
$(form).attr('method','POST');
$(form).attr('target',frameId);
if(form.encoding) {
form.encoding = 'multipart/form-data';
} else {
form.enctype = 'multipart/form-data';
}
$(form).submit();
} catch(e) {
jQuery.handleError(s,xml,null,e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload',uploadCallback);
} else {
document.getElementById(frameId).addEventListener('load',uploadCallback,false);
}
return {abort: function () {}};
},
uploadHttpData: function(r,type) {
var data = !type;
data = type == 'xml' || data ? r.responseXML : r.responseText;
if(type == 'script')
jQuery.globalEval(data);
if(type == 'json')
eval('data = ' + data);
if(type == 'html')
jQuery("<div>").html(data).evalScripts();
return data;
}
})
任何想法将不胜感激。谢谢！
答案 0 :(得分：1)
只需将连接作为最后一个条目放在ajaxFileUpload函数的$ .ajaxFileUpload调用的成功和错误处理程序中，它将适用于后续点击。
所以看起来像这样
//uploader event
$('#uploadedfile').change(function(){
ajaxFileUpload();
});
//upload file
function ajaxFileUpload(){
$.ajaxFileUpload({
url:'upload.php',
secureuri:false,
fileElementId:'uploadedfile',
dataType: 'json',
success: function(data,status){
if(typeof(data.error) != 'undefined'){
if(data.error){
//print error
alert(data.error);
}else{
//clear
$('#img img').attr('src',url+'cache/'+data.msg);
}
}
$('#uploadedfile').change(function(){
ajaxFileUpload();
});
},
error: function(data,status,e){
//print error
alert(e);
$('#uploadedfile').change(function(){
ajaxFileUpload();
});
}
});
return false;
}
但话说再说一遍，jQuery.handleError自1.5以来就不存在了
答案 1 :(得分：0)