我有一个包含三个dropzones的页面,每个dropzones调用一个函数,一旦它们完成就更新站点上的图像。问题是如果同时上传三个文件,则在三个文件中的最后一个完成上载之前不会触发该功能。有没有办法在每次上传文件时触发函数的迭代?
使用Javascript:
var updatePreview = function(page) {
$.ajax({
url: 'submit.php',
type:'GET',
success: function(data){
var pageSize = '',
source_preview = '',
source_preview_background = '';
if ($(data).find('#file_0' + page + ' .ledger_preview').length) {
//If paper is ledger-size
source_preview = $(data).find('#file_0' + page + ' .ledger_preview'),
source_preview_background = source_preview.css('background-image');
$('#file_0' + page + ' .ledger_preview').css('background-image', source_preview_background);
}
else {
//If paper is letter-size
source_preview = $(data).find('#file_0' + page + ' .letter_preview'),
source_preview_background = source_preview.css('background-image');
$('#file_0' + page + ' .letter_preview').css('background-image', source_preview_background);
}
}
});
};
Dropzone.autoDiscover = false;
var dzOne = new Dropzone('#file-one', {
url: 'submit.php',
paramName: 'file_01',
method: 'POST',
init: function() {
this.on('complete', function() {
updatePreview('1');
});
},
accept: function(file, done) {
done();
}
});
var dzTwo = new Dropzone('#file-two', {
url: 'submit.php',
paramName: 'file_02',
method: 'POST',
init: function() {
this.on('complete', function() {
updatePreview('2');
});
},
accept: function(file, done) {
done();
}
});
var dzThree = new Dropzone('#file-three', {
url: 'submit.php',
paramName: 'file_03',
method: 'POST',
init: function() {
this.on('complete', function() {
updatePreview('3');
});
},
accept: function(file, done) {
done();
}
});