ajaxを介してアップロードされている各ファイルのプログレスバーを表示する方法は？

Question

まず、お時間をいただき、ありがとうございました。もう一度読み直してください....私はインターネット上のドキュメントはたくさんありますが、同じプログレスバーに複数のプログレスバーがあるので、簡単なプログレスバーのヘルプをリクエストしていませんリクエスト...そのことについてのチュートリアルではないようです。

私はこのためのプラグインを望んでいないが、私はあなたの助けを借りて....自分自身でそれをやろうとしている：Dを、私たちはそれをプラグイン

なしに成し遂げることができるかもしれない何を考えてAjaxリクエストを介して送信されるファイルの複数のプログレスバーを取得する必要がありますか？私はほとんどそれを持っていましたが、私は各イベントを差別化して進捗状況を示すために、次に何をすべきかを理解することができませんでした。代わりに、文書の本文のすべてをコーディングする

function readURL() { 
     if(window.File && window.FileReader && window.FileList && window.Blob){ 
      //All the File APIs are supported. 
     }else{ 
      alert('The File APIs are not fully supported in this browser, try to update it or get a new one here.'); 
      } 
     } 

    function handlefiles(event){ 
     var files = event.target.files; 
     var i,f; 

     var form_data = new FormData(); 
     for(var i = 0; f=files[i];i++){ 
      form_data.append(i,f); 
      if(!f.type.match('image.*')){ 
       continue; 
      } 

      var reader = new FileReader(); 

      reader.onload = (function(the_file){ 
       return function(e){ 
        var li = $("<li/>").attr('class','thumbnailupic'); 

        li.html('<img class="thumb" src="'+e.target.result+'" title="'+ the_file.name+ '"/><div class="progress_bar"><div class="percent"></div></div><div class="cancel_read" title="remove">x</div>'); 

        li.appendTo($("#here")); 

       }; 
      })(f); 

      $("#start_upload").click(function(e) { 
      $.ajax({ 
       xhr: function() { 
        var xhr = new window.XMLHttpRequest();   
        xhr.upload.addEventListener("progress", function(evt) { 
         if (evt.lengthComputable) { 
          var percentComplete = Math.round((evt.loaded/evt.total) * 100); 

          // this shows me the progress of each file being uploaded 
          console.log(percentComplete); 

          if(percentComplete){ 
           if(percentComplete <= 100){ 
            //I want each "li" that is automatically generated containing their respective progress par being filled up as the upload happens but I'm stuck....since I don't know how 


            //this is what i had in mind.... I was thinking about looping but it's useless since I don't know how to go to the next element after the first file it's sent.... 
            //$("#here li:eq("+i+")").find('.percent').css({"width":"" + percentComplete + '%' + "",'height':'100%','background-color':'#906'}); 
           } 


          } 

         } 
        }, false); 

        return xhr; 
       }, 
       type: 'POST', 
       url: "process_upload.php", 
       data: form_data, 
       contentType: false, 
       cache: false, 
       processData: false, 
       success: function(data){ 
        //Do something on success 
       } 
      }); 

      }); 

      reader.readAsDataURL(f); 
     } 
    } 

    $("#upload_pics").click(function(e) { 
     if($("#start_upload").length == 0){ 
      var start_upload = $("<div/>").attr('id','start_upload').html("start upload"); 
      start_upload.insertAfter($(this)); 
     } 
     if($("#upics").length == 0){ 
      $("<input>").prop({"type":"file","multiple":true,"id":"upics","name":"pics[]"}).trigger('click').change(function(e) { 
       readURL(); 
      },handlefiles); 
     } 
    }); 

Answer 1

、独自のオブジェクトに各インスタンスをラップ：

HTML：：

<div id="upload_pics">Upload+</div> 
<ul id="here"> 
</ul> 

、ここJSここでは、コードです。 1つのオブジェクトで機能を正しく取得すると、オブジェクトのインスタンスをいくつでも作成して、それが動作するようにすることができます。