jQuery mehrere Dateiselektor als "nacheinander"

Question

Ich bin auf der Suche nach einer ziemlich einfachen Lösung, um Benutzern die Auswahl von Dateien nacheinander in input type="file" als UX-Analyse gezeigt, dass nur wenige Leute verstehen, wie man es mit Scheiße oder Ctrl zu verwenden Wählen Sie mehrere Dateien gleichzeitig aus.

Derzeit, wenn Benutzer eine Datei auswählen, klicken Sie dann erneut und wählen Sie eine andere Datei, überschreibt es vorherigen Wert.

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

Cant verwenden Sie einige Open-Source-Lösung für das Ziehen/Hochladen mehrerer Dateien? Es muss eine Menge von ihnen da draußen geben. Zum Beispiel zuerst fand ich in google: http://www.dropzonejs.com/