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 很容易实现