function makeCall(file, handlerFile, sendMethod, formData) {
//console.log(instance.files);
$.ajax({
url: handlerFile,
type: sendMethod,
xhr: function() { // Custom XMLHttpRequest
var xhr = $.ajaxSettings.xhr();
if(xhr.upload) { // Check if upload property exists
xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); // For handling the progress of the upload
//xhr.upload.addEventListener('loadend', successHandler.bind(xhr));
}
//console.log(xhr);
return xhr;
},
beforeSend: beforeSendHandler.bind(file),
success: completeHandler.bind(file),
//error: errorHandler,
data: formData, // Form data
dataType: 'json',
cache: true,
//async: false,
contentType: false,
processData: false
});
}
$(".afu-input").on('change', function() {
var i = 0;
var length = this.files.length;
var files = this.files;
var calling = setInterval(function() {
var file = files[i];
console.log(file);
uid = generateUniqueId();
file.id = uid;
var formData = null;
formData = new FormData();
formData.append(i, file);
formData.append(i, [uid]);
makeCall(file, handlerFile, sendMethod, formData);
i++;
if (i >= length) {
clearInterval(calling);
}
}, 2000); // Delay is for testing. Normaly there is no delay
}
我正在尝试逐个上传文件。但问题是ajax正确发送请求,但只返回一个(第一个)数据。
我的目标是创建脚本,在输入[type = file]更改时上传图像(以及后来的其他文件)。我试图用一个请求上传多个文件,但是进度事件将它们注册为一个。我曾经想过将(块)文件切成碎片蚂蚁发送它们,但这种变体似乎更容易(只需要让它工作,然后我改进它)。感谢。
答案 0 :(得分:5)
Ajax调用可以是任何数字。所以你需要使用apply();并创建ajax调用数组。现在代码如下所示:
function makeCall(file, formData) {
return $.ajax({ // It's necessary to return ajax call
url: 'handler.php',
type: 'POST',
xhr: function() { // Creating custom XHR to register progress event(If you know better solution - please post ir)
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) { // Check if upload property exists
xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); // Registering progress event
}
return xhr;
},
// Events handlers
beforeSend: beforeSendHandler.bind(file),
success: completeHandler,
data: formData,
dataType: 'json',
cache: true,
contentType: false,
proccessData: false
});
}
$('.afu-input').on('change', function() {
var files = this.files;
var calls = [];
$.each(files, function(i, file) {
uid = generateUniqueId();
file.id = uid;
var formData = new formData();
formData.append(0, file); // Just easier to set index to 0 cause for every file returning new obejct, so is no point to set more indexes
calls.push(makeCall(file, formData)); // And finally pushing calls to array
});
// Using jQuery.when
// Cause I don't know how many calls will be I'm using "apply" so I can add array instead of one by one calls
$.when.apply($, calls); // Exactly I don't know why need "$"
}
function beforeSendHandler() {
console.log(this);
}
function completeHandler(data) {
console.log(data);
}
function progressHandlingFunction(e) {
console.log(e);
console.log(this);
}