我有一个Blueimp jQuery多文件上传插件在内部项目上工作没有任何问题,但后来我需要触发通过AJAX添加的元素。此代码应该上传一个或多个文件,将文件名存储到数据库(由includes/file.inc.php
的AJAX请求处理),然后报告文件上载状态。
<input type="hidden" name="co_id" value="<?php echo $_POST['co_id']; ?>" id="upload_co_id" />
<input id="fileupload" type="file" name="files[]" multiple>
$i = 0;
$(document).on('change','#fileupload',function(){
var url = 'handler.php';
var co_id = $('#upload_co_id').val();
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<span class="uploaded" id="file'+$i+'" />').text(file.name).appendTo('#files');
$.ajax({
url: 'includes/file.inc.php',
type: "POST",
data: {'co_id': co_id,'file_name': file.name},
success: function(data) {
if (data == 1) {
$('#file'+index).addClass('success');
setTimeout(function() {
$('#file'+index).removeClass('success');
}, 1500);
} else {
$('#file'+index).addClass('failure');
$('#file'+index).append("\n"+data);
}
},
error: function() {
$('#file'+index).addClass('failure');
}
});
$i++;
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
这确实有效,但只选择第二次时间文件。我知道$(document).on('change','#fileupload',function(){
会在第一次选择文件时被触发,但在我单击文件输入并选择不同的文件之前,它不会处理该文件。我没有收到任何控制台错误。
我已经查看了关于此问题的Blueimp文档,并讨论了如何使用add
回调选项,但这根本不起作用。
我已经在这个问题上抓了几个小时。为什么fileupload
插件仅在第二次触发。