我有一个输入字段,允许我选择多个文件(在我的例子中是图像),问题是当我选择多个文件时,它只会在谷歌浏览器中显示一个。但是,它在 IE 上工作得很好,所以不确定问题出在哪里。有什么想法吗?
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" name="files[]" style="display:none;" multiple onchange="$('#upload-file-info').html($(this).val());">Browse</label>
<span class='label label-info' id="upload-file-info"></span>
<div style="float:right;">
<label class="btn btn-primary" for="my-file-selector2">
<input id="my-file-selector2" type="Submit" style="display:none;" name="search">Import</label>
</div>
</form>
最佳答案
这与您的浏览器无关。
$(this).val() // This only contains the last file name
$(this).prop('files');
确实包含所有上传的文件作为 FileList 对象。
循环文件属性并将所有名称放入您的#upload-file-info
$('#my-file-selector').on('change', function(e){
$('#upload-file-info').html(""); //clear the info before appending
var files = $(this).prop('files');
for (var i = 0; i < files.length; i++) {
$('#upload-file-info').append(files[i].name);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" name="files[]" style="display:none;" multiple>Browse</label>
<span class='label label-info' id="upload-file-info"></span>
<div style="float:right;">
<label class="btn btn-primary" for="my-file-selector2">
<input id="my-file-selector2" type="Submit" style="display:none;" name="search">Import</label>
</div>
</form>
有关浏览器规范中的文件的更多信息:
关于jquery - 显示所有选择的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40613290/