file上传组件，失败后内容清空

IE下清空file组件

最新推荐文章于 2025-07-11 11:28:23 发布

原创最新推荐文章于 2025-07-11 11:28:23 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE

前端技术专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Internet Explorer浏览器中遇到的file组件上传问题，特别是在文件类型不符合要求时如何清空组件值。通过对比不同解决方案，提出了一种利用临时表单的方法来规避IE的限制。

一、file上传组件

二、遇到的问题：

当出现文件类型不符合等失败情况后，希望将组件中的地址清空

即：<input type="file" id="uploadFile" value=""/>

在FF下直接使用this.value = ""即可，但是IE却不能达到预期效果

三、解决方案：

1、使用document.execCommand('Delete', false, null)

分析：

这个方案可以在IE下达到效果，只是同时也引入了新的问题：如果不刷新页面，IE下无法进行第二次提交

IE下会有“拒绝访问”的提示。

2、使用form.reset()将上传组件内容清空

需求：form中有其他字段，不刷新页面，不希望清空

解决方式：

1）新建一个tempForm为临时form

2）将原Form中的钙file组件加入到tempForm中

3）tempForm.reset()将file组件内容清空

4）将file组件再移回原Form

示例代码：

if (!_vali['_v2'].validate()) {// 验证失败
                this.value = ''; // FF 清空输入内容
                // IE清空内容
                var zipFileInput = D.get('zipFile');
                if(zipFileInput && zipFileInput.value != ''){
                    var tempForm = document.forms['tempForm'];
                    tempForm.appendChild(zipFileInput);
                    tempForm.reset();
                    var afterZipFile = D.get('zipFile-advice');
                    if(afterZipFile){
                        D.insertBefore(tempForm['zipFile'], afterZipFile);
                    }
                    tempForm.removeChild(zipFileInput);
                }
            }