我正在寻找一个相当简单的解决方案，允许用户在input type="file"中一个接一个地选择文件，因为UX分析显示只有少数人知道如何使用它来按住shift键或ctrl一次选择多个文件。
目前，如果用户选择一个文件，而不是再次单击“选择”并选择另一个文件，则会覆盖以前的值。
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);
});
});