jQuery複数のファイルセレクタが「次々と」動作するようにする

Question

input type="file"のUX分析で、ユーザーがファイルを次々に選択できるようにする簡単な解決策を探している人はほんの一部の人がshitやctrlを保持する方法を理解している一度に複数のファイルを選択してください。

現在、ユーザーが1つのファイルを選択した場合、もう一度[選択]をクリックして別のファイルを選択すると、以前の値が上書きされます。複数のファイルをアップロード/ドラッグのためのいくつかのオープンソースソリューションを使用

HTML

<div class="fileform-multiple"> 
    <input multiple="multiple" data-multiple-caption="{count} files selected" class="inputfile" name="photos[image][]" type="file" id="listing_photos_attributes_1_image"> 
    <label for="file" class="form-control">Choose a file</label> 
    <div class="selectbutton">Choose photo</div> 
    <small>Maximum 5 files, each less than 2Mb</small> 
</div> 

JS

var inputs = document.querySelectorAll('.inputfile'); 
Array.prototype.forEach.call(inputs, function(input){ 
    var label = input.nextElementSibling, 
     labelVal = label.innerHTML; 

    input.addEventListener('change', function(e){ 
     var fileName = ''; 
     var errors = 0 
     $.each(e.target.files, function(index, value) { 
      var ext = value.name.split('.').pop().toLowerCase(); 
      if ($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { 
       alert('invalid extension! Only .png, .jpg and .jpeg allowed '); 
       errors ++ 
      }; 
     }); 
     if (errors > 0){ 

     } else if (this.files && this.files.length > 5) { 
     alert('Please select less than 5 files'); 
     } else if(this.files && this.files.length > 1) { 
      fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
     } else{ 
      fileName = e.target.value.split('\\').pop(); 
     } 

     if (errors > 0){ 

     } else if(fileName){ 
      label.innerHTML = fileName; 
     } else { 
      label.innerHTML = labelVal; 
     } 

     var strToPrepend = fileName + ' ,' + "<br/>" 
     $(this).closest('.fileform-multiple').find('small').prepend(strToPrepend); 
    }); 
}); 

Answer 1

カント？そこにはたくさんの人がいるはずです。たとえば、最初にGoogleで見つけたもの：http://www.dropzonejs.com/