input上传多个文件时，显示多个文件名称

最新推荐文章于 2024-01-24 10:39:34 发布

原创最新推荐文章于 2024-01-24 10:39:34 发布 · 3.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input

收录于

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的文件上传功能，当用户选择文件后，页面会动态显示所选文件的名称。通过监听input元素的change事件，获取用户选择的文件列表，并将其名称以友好的格式展示在页面上。

<input type="file" name="myfile" multiple="multiple" id="upload_input">
<input type="button" value="确定上传" class="btn btn-default" id="upload_btn">
<!--显示在这里-->
<p id="filenames"></p>

$("#upload_input").on("change",function(e){
	var e=e||window.event
	var _file=e.target.files
	var names=""
	if(_file.length>0){
		for(let i=0;i<_file.length;i++){
			if(i==_file.length-1){
				names+=_file[i].name
			}else{
				names+=_file[i].name+"<br>"
			}
		}
		$("#filenames").html(names)
	}else{
		$("#filenames").html("")
	}
})