解决用input框上传同一文件多次时无法触发change事件的问题

最新推荐文章于 2023-08-25 14:56:45 发布

原创最新推荐文章于 2023-08-25 14:56:45 发布 · 826 阅读

1 ·

CC 4.0 BY-SA版权

日常问题与技巧专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了HTML中input元素在文件上传时无法重复选择同一文件的问题，详细解析了其背后的原因，并提供了一种简单有效的解决方案，即通过清空input的value属性来实现重复上传同一文件的功能。

前端进阶（第二记）

为什么input无法多次选中同一个文件？？？
答：这是由于input对象的val值没有发生改变造成的

html部分

<div class="row-panel-content">
	<div class="choose-text">
		<button id="getFile" @click = "chooseFile">选择文件</button>
		//将input框隐藏，因为无法修改样式
		<input type="file" class="filePanel" name="up_file" style="display: none">
		<span class="fileName" >{{uploadFileName}}</span>
	</div>
	<p>仅允许导入"xls"或"xlsx"格式文件!</p>
</div>

js部分

// 选择文件
        chooseFile : function(el){
            var input = el.target.nextElementSibling;
            input.click();
            var then = this;
            input.onchange = function (e) {
                var file = e.target.files[0];
                vm.uploadFile = file;
                console.log(vm.uploadFile);
                if(file){
                    vm.uploadFileName = file.name;
                    el.target.innerText = "重新选择";
                }
                //**就是这一句，清空input的value就可以重复上传同一个文件啦，吼吼**
                input.value = null;
            }
        }