jqueryのAjaxのすべての画像の進行状況を表示する方法

Question

がちょうどFacebookのアップロードのようにアップロードされているすべてのファイルに対して複数のファイルアップロードチェックの進行状況、

彼らは1 <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) { 
 
\t 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. にアップロードされたすべての画像を変換しますベース64までの画像
3. [私はGmailのファイルのようなAJAXファイルアップローダーを希望する各画像の進行が

をアップロードされているが、私はまたの