我有一个带有输入类型文件和属性的图像上传表单。
当我选择要上传的所有图片时,它会调用' index.php?controller = produse_add& method = uploadmultiple'并在一个ajax调用中上传图像。
如何为每2个文件在一个ajax调用中上传所有选定的文件?
例如,如果我选择了8张图像进行4次ajax调用。
$s("#multiple-photos").on('change', handleFileSelect);
function handleFileSelect(e) {
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
var formData = new FormData();
var parallelFiles = 2;
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
var html = '<li class="dz-image-preview"><div class="documents_drop_file_thumb"><div class="picture_menu menu-overlay"><div class="picture_thumb_image"><img src="'+ e.target.result +'" data-file="'+f.name+'"/></div></div><div class="picture_overlay"><ul class="picture-overlay-actions"><li class="picture_view"><a class="dz-extraaction tips" href="javascript:void(0);" title="Vizualizeaza"><i class="fa fa-eye"></i></a></li><li class="picture_remove"><a class="dz-remove image-'+nr+' tips" href="javascript:void(0);" title="Sterge" ><i class="fa fa-times"></i></a></li></ul></div></div></li>';
image_holder.append(html);
}
$s('.panel-imagini .no-images').hide();
reader.readAsDataURL(f);
formData.append('foto[]', f);
var codprodus = $s('#product-update').data('product-code');
formData.append('codprodus', codprodus);
});
if(method == 'modify'){
NProgress.start();
jQuery.ajax({
type: 'post',
url: 'index.php?controller=produse_add&method=uploadmultiple',
data: formData,
dataType: 'JSON',
cache: false,
contentType: false,
processData: false,
beforeSend: function(data){
$s('.myDropZone').html('<p>Loading...</p>');
},
success: function(data){
var html = '';
$s.each(data, function(k) {
html += '<li class="dz-processing dz-success dz-complete dz-image-preview">';
html += '<div class="documents_drop_file_thumb">';
html += '<div class="picture_menu menu-overlay">';
html += '<div class="picture_thumb_image"><img src="/media/images/'+data[k].image+'"/></div>';
html += '<div class="picture_overlay">';
html += '<ul class="picture-overlay-actions">';
html += '<li class="picture_view"><a class="dz-extraaction tips" href="javascript:void(0);" title="Vizualizeaza"><i class="fa fa-eye"></i></a></li><li class="picture_remove"><a class="dz-remove tips" href="javascript:void(0);" data-dz-remove="' + data[k].product_image_id + '" title="Sterge"><i class="fa fa-times"></i></a></li>';
html += '</ul>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</li>';
});
$s('.myDropZone').html(html);
},
complete: function(data){
setTimeout(function() {
NProgress.done();
$s('.fade').removeClass('out');
}, 1000);
}
});
}
}