jQuery并行上传

时间:2016-11-16 14:17:26

标签: javascript jquery ajax

我有一个带有输入类型文件和属性的图像上传表单。

当我选择要上传的所有图片时,它会调用' 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);
                        }
                    });
                }

            } 

0 个答案:

没有答案