jQuery ajax多个文件上传检查每个文件的进度

Question

如何显示正在上传的每个图像的进度，就像在Facebook上传中一样，

它们只有一个<input multiple/>但是在您选择了多个文件后，您可以看到每个图像的进度条，还可以取消上传？

[！[在此处输入图片描述] [1]] [1]

我尝试了一些ajax xhr以显示进度，并且只能获取所有选定文件的总数。 在此先感谢您的帮助。

 $("body").on('change', '#upload-nw-prod', function(event) { event.preventDefault(); $('#upload-multiple-new-products').submit(); }); $('body').on('submit', '#upload-multiple-new-products', function(event) { event.preventDefault(); var formData = new FormData($(this)[0]); $.ajax({ url: '/nw-product-upload-mod', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { $("#nw-prod-upl-mdl").html(data); }, data: formData, cache: false, contentType: false, processData: false }); 

 <form id="upload-multiple-new-products" class="pull-right" enctype="multipart/form-data" method="post" action="#"> <label for="upload-nw-prod" class="btn btn-lg btn-primary">Upload products</label> <input id="upload-nw-prod" multiple="" name="photo[]" type="file" accept="image/*"> <input name="submit" value="" style="display: none;" type="submit"> </form> 

//after submit (image intervention)
$photos = $request->file('photo');
$thumb_th_lgArrs    = [];
foreach ($photos as $key => $photo) {
    $img = Image::make($photo->getRealPath());
    $img->resize(300, 300, function ($constraint) {
        $constraint->aspectRatio();
        $constraint->upsize();
    });
    $img->encode('jpg');
    $img->save($saveDirectory.'/'.$thumb_th_lgArrs[$key]['image_name']);
    $img->reset();
}

Answer 1

在玩了dropzonejs之后，我不知道该过程是如此简单

1. 获取所有在<input multiple/>上传的图像
2. 将图像转换为base64
3. 使用ajax单独上传图像
4. 预览每个上传图像的进度

但我还建议dropdownjs非常易于实现