开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ie下 js自动清空file

在Internet Explorer（IE）浏览器中，JavaScript自动清空文件输入框（<input type="file">）的值可能会遇到一些问题。这是因为IE浏览器对文件输入框的处理方式与其他现代浏览器有所不同。以下是一些基础概念和相关解决方案：

基础概念

文件输入框：<input type="file"> 允许用户从本地计算机选择一个或多个文件。
自动清空：指的是在用户选择文件后，通过JavaScript代码将文件输入框的值设置为空，以便用户可以重新选择文件。

问题原因

在IE浏览器中，直接设置文件输入框的值为""或null可能不会生效，因为IE对文件输入框的安全性有更严格的限制，防止恶意脚本操作用户的文件系统。

解决方案

以下是几种常见的解决方案：

方法一：创建新的文件输入框

通过动态创建一个新的文件输入框并替换旧的输入框，可以实现清空文件输入框的效果。

<!DOCTYPE html>
<html>
<head>
    <title>Clear File Input in IE</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="clearFileInput()">Clear File</button>

    <script>
        function clearFileInput() {
            var oldInput = document.getElementById('fileInput');
            var newInput = document.createElement('input');
            newInput.type = 'file';
            newInput.id = 'fileInput';
            oldInput.parentNode.replaceChild(newInput, oldInput);
        }
    </script>
</body>
</html>

方法二：使用隐藏的文件输入框

通过使用一个隐藏的文件输入框和一个可见的按钮，可以在用户点击按钮时切换显示的文件输入框。

<!DOCTYPE html>
<html>
<head>
    <title>Clear File Input in IE</title>
    <style>
        #hiddenFileInput {
            display: none;
        }
    </style>
</head>
<body>
    <input type="file" id="visibleFileInput">
    <button onclick="switchFileInput()">Clear File</button>
    <input type="file" id="hiddenFileInput">

    <script>
        var currentInput = 'visibleFileInput';

        function switchFileInput() {
            if (currentInput === 'visibleFileInput') {
                document.getElementById('visibleFileInput').style.display = 'none';
                document.getElementById('hiddenFileInput').style.display = 'inline';
                currentInput = 'hiddenFileInput';
            } else {
                document.getElementById('hiddenFileInput').style.display = 'none';
                document.getElementById('visibleFileInput').style.display = 'inline';
                currentInput = 'visibleFileInput';
            }
        }
    </script>
</body>
</html>

应用场景

这些方法适用于需要在用户选择文件后允许重新选择文件的场景，例如：

文件上传功能
图片预览和重新选择
多文件选择和替换

通过上述方法，可以有效解决在IE浏览器中JavaScript自动清空文件输入框的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

IE下JS文件失效问题总结

今天遇到了一个很诡异的问题，Firefox下好好的页面，在IE下却接二连三的报错，这到底是什么地方产生的错误。经过一上午的仔细排查，发现了真凶原来是IE对于对象和数组定义的严格限制。...在JS中，我们一般定义数组和对象都如下： var arr = [ 　　arr1, 　　arr2, 　　arr3, 　　arr4 ]; 对象： var obj = { 　　param:one,...　　param:two, 　　param:three }; 如果最后的一项多了一个“,”，那么在IE中就会产生错误，从而最终导致引用的JS文件失效。...例如： js'> function a(){ ... } var obj = { 　　param:a,...　　param:b, 　　param:c, js'> a(); alert(obj); 这个时侯就会出现函数调用的错误

3.4K3 0

IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决办法

今天在调试一个页面的时候遇到一个问题，在IE9下运行得很好的脚本，在IE8里打开的时候弹出错误：expected identifier, string or number，按照经验，应该是定义对象的时候最后一个属性末尾跟了逗号...，但检查一遍后没发现有这种情况，后来仔细看了一下报错的位置，发现有定义json对象属性时，属性名没有用引号括起来，于是加了上去再试，问题解决了。...综上所述，当出现expected identifier, string or number的错误时，你首先应该检查在使用对象字面量时是否在最后一个属性后跟了逗号，这在js新手写的代码中比较常见，如： {

1.9K3 0

利用placeholder属性来添加输入框默认文字提示，提高用户体验

一、JS 控制默认文字先说一下问题：用 HotNewspro 主题的网站，默认的留言输入框是这样的： ? 常规情况下，光标聚焦留言输入框，这个预设提示文字是会自动消失的： ?...鼠标 onclick 点击时，判断输入框是不是初始的【默认提示文字】，如果是就清空； b. 鼠标光标离开输入框时，判断输入框里面是否为空，如果为空就自动填入【默认提示文字】。...不过在上文插入表情的那种情境下，就出问题了：点击插入表情时，并没有对输入框触发 onclick 动作，于是默认文字并未清空就填入表情了，然后就算鼠标离开输入框，由于默认文字发生改变，也就不会自动清空了！...不过话又说回来，placeholder 是 HTML5 专用的，看网上介绍是不支持 IE6~8，我个人手头上就懒得测试低版本 IE 了，随手测试了 IE11 下的 placeholder，发现比 WEBKIT...还完美，点击还能自动清空，和之前的 JS 一摸一样了！

4.3K9 0

WebUploader文件上传插件

在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。...qq-pf-to=pcqq.group 各个参数的说明文档中都有，可以详细参考一下文档，再这里给大家列出一个上传文件的实现，如有不足的地方希望大家指出，谢谢。.../webuploader/webuploader.min.js"> 引入bootstrap的js js/plugins/bootstrap-table..."configPreName" value="tracingUpload"> 清空上传文件...uploading') { uploader.stop(); } else { uploader.upload(); } }); //清空

3.8K3 0

js的并行加载以及顺序执行

重新温习了下这段内容，发现各个浏览器的兼容性真的是搞大了头，处理起来很是麻烦。...2，可以通过document.write('')的方式来并行加载（IE，现代浏览器）和顺序执行。　　3，通过xhr加载js。...自己写了一个简单的插件，目前并没有在IE6,7上测试。 if(!...在firefox，opera下也是顺序加载。 asyncHelper....gte IE8以及opera支持。 //全部浏览器支持此种方式的顺序加载js asyncHelper.

5.5K8 0

手撸 webpack4.x 配置（二）

今天我学习配置下 webpack 中另一个模块 plugins 配置。...之前我们都是手动在打包后(dist)目录里手动新建的 index.html 然后把打包后生成的 JS 文件手动的引入，今天我们来安装一个插件让webpack 自动给我们生成模板！ 1 ie...(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: { outputPath...接下来，我们想在打包时，先清空 dist目录，然后再生成新的打包文件，这里我们需要再按照一个插件！

2203 0

Qt编写地图综合应用14-离线地图下载

同时支持webkit内核、webengine内核、IE内核。支持设置多个标注点，信息包括名称、地址、经纬度。可设置地图是否可单击、拖动、鼠标滚轮缩放。...支持地图交互，比如鼠标按下获取对应位置的经纬度。支持查询路线，可设置起点位置、终点位置、路线模式、路线方式、路线方案（最少时间、最少换乘、最少步行、不乘地铁、最短距离、避开高速）。...可设置行政区划，指定某个城市区域绘制图层，在线地图自动输出行政区划边界点集合到js文件给离线地图使用。可静态或者动态添加多个覆盖物。支持点、折线、多边形、矩形、圆形、弧线、点聚合等。...支持js动态交互添加点、删除点、清空点、重置点，不需要刷新页面。支持任意Qt版本、任意系统、任意编译器。...(dirName + fileName); if (file.open(QFile::WriteOnly | QFile::Truncate)) { file.write

1.4K3 0

使用jQuery清空file文件域的解决方案

对一个文件域(input type=file)使用了验证后，我们总会希望把文件域中的值给清空了，在IE中，由于安全设置的原因，是不允许更改文件域的值的，接下来为大家介绍一下解决方法一般来说，在对一个文件域...(input type=”file”)使用了验证后，我们总会希望把文件域中的值给清空了（否则错误的文件仍然会被提交），而在IE中，安全设置的原因，是不允许更改文件域的值的（也就是不能使用val(“”)）...在IE下复制元素的时候，其中的值是不会被复制的，所以就达到了清空文件域的目的了。而在Firefox下，其中的值也会被一同复制，那么我们就顺便清空一下就做到兼容了。...var file = $("#file") file.after(file.clone().val("")); file.remove();

1.1K2 0

PHP+AjaxForm异步带进度条上传文件实例代码

function(){}, //提交失败执行的函数　　　　　　 dataType:null,　　　　　　　//服务器返回数据类型　　　　　　 clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值...　　　　　　 restForm:true,　　　　　　 //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态　　　　　　 timeout:6000 　　　　　　 //设置请求时间，超过该时间后，自动退出请求...transitional.dtd"> IE...content="NOODP"> PHP+Ajax异步带进度条上传文件实例_php IE.../jquery.min.js"> js/jquery.form.js"> <!

1.4K5 0

PHP+AjaxForm异步带进度条上传文件实例代码

function(){}, //提交失败执行的函数　　　　　　 dataType:null,　　　　　　　//服务器返回数据类型　　　　　　 clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值...　　　　　　 restForm:true,　　　　　　 //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态　　　　　　 timeout:6000 　　　　　　 //设置请求时间，超过该时间后，自动退出请求...transitional.dtd"> IE...content="NOODP"> PHP+Ajax异步带进度条上传文件实例_php IE.../jquery.min.js"> js/jquery.form.js"> <!

1.2K3 0

接口-Fiddler-功能介绍（一）

在选中该选项后，为了得到最佳结果，最好清空浏览器中的缓存。 Cache Always Fresh选项会自动响应所有包含HTTP/304响应的有条件的HTTP请求，表示客户端缓存是最新的。...Reset Session ID counter on Ctrl + X-按下Ctrl + X的时候自动重算session ID。 Set Readonly Color-设置只读颜色。...File Diff Tool-文件比对工具。 2.4.2WinINET Options 打开IE的Internet属性窗口，可以查看局域网的代理服务器设置。...2.4.3Clear WinINET Cache 会清空IE和其他应用中所使用的WinINET缓存中的所有文件。...2.4.4Clear WinINET Cookies 会清空IE和其他应用中所发送的WinINET Cookie。Session的Cookies还是保持不变。

1.5K2 0

H5C3第五节

-- 现象: IE8 以下版本不支持 html5 语义化标签 --> 我是header标签，我应该独占一整行解决方式: 在浏览器解析标签之前, 动态创建一下 header...8 不识别 html5 语义化标签的问题 js"> 但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要, 消耗了性能...--[if lte IE 8]> alert("呵呵, 小于等于IE8都会执行这段话"); js...window.localStorage的方法 setItem(key, value) //设置存储内容 getItem(key) //读取存储内容 removeItem(key) //删除键值为key的存储内容 clear() //清空所有存储内容...面试题：请描述一下cookie，sessionStorage和localStorage的区别？

7021 0

【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇

└── main.js自动清空上次打包资源配置const path = require("path");module.exports = { entry: "....// 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ // 添加此处配置...// 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ ], }, /...// 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ // 对js进行编译.../main.js", // 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: {

2.3K0 0

接口测试|Fiddler界面主菜单功能介绍（二）

Fiddler界面主菜单功能介绍图片上篇文章介绍了File,Edit,Rules菜单，本篇文章书接上回，介绍剩下的Tools,View,Help菜单。...：打开IE的Internet Options（选项）窗口（3）Clear WinINET Cache：清空 IE 和其他应用中所使用的 WinINET 的缓存文件（4）Clear WinINET Cookies...：清空 IE 和其他应用中所使用的 WinINET 的 Cookies 文件；Session的Cookies还是保持不变（5）TextWizard......窗口，支持对文本进行编码和解码（6）Compare Session：比较 session，可以在 session 框中选中两个 session，然后点击此按钮，可以来比较两个 session，正常情况下需要安装插件...若在其中勾选 Enable 框，然后在下面加入 host 配置，点击保存之后，这个配置并不会修改到本地 hosts 中，取消勾选就会失效，若点击 Import Windows Hosts File 将会导入本地的

4891 0

UEditor富文本编辑器的简单入门

"> * 引入all.js js"> * 引入parse.js <script...rattenking.github.io/demo/editor/index.html', //初始化时，是否让编辑器获得焦点true或false focus:false, //focus时自动清空初始化时的内容...viewport" content="width=device-width, initial-scale=1.0"> ie...', //初始化时，是否让编辑器获得焦点true或false focus:false, //focus时自动清空初始化时的内容...Editor，而非baidu.editor.ui下的Editor var myeditor = UE.getEditor('editor1',{ initialContent

1.2K1 0

.Net之Layui多图片上传

src="//res.layui.com/layui/dist/layui.js" charset="utf-8"> 当然假如你需要有弹框提示的话，你还需要引入Layer.js 二、...', url: '/FileUpload/FileLoad/', multiple: true,//允许选择多张图片 before: function (obj) { //预读本地文件示例，不支持ie8...obj.preview(function (index, file, result) { $('#demo2').append( '<img src="' + result + '" alt="' +...(scrollingGraph); } console.log(scrollingGraph); } else { return layer.msg('上传失败'); } } }); }); //清空所有图片...function clearAll() { layer.confirm("确定要全部清空吗？"

1.4K4 0

第一章： Vue2 技术精讲

el : '#app', data : { msg : '点击一下<...指令 v-model 作用: 给表单元素使用, 双向数据绑定数据变化 → 视图自动更新视图变化 → 数据自动更新语法: v-model = '变量' ‍ ‍ 16....数组.length累计长度覆盖数组清空列表 v-show 控制隐代码演示：清空 --> 清空任务自动重新计算。

1831 0

15·灵魂前端工程师养成-JavaScript历史

学习JS的基本要求 JavaScript的历史 JavaScript爆发 -曾老湿, 江湖人称曾老大。 ---- -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。...-擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。...2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。...需要把node_modules写入.gitignore文件中 MacBook-Pro:http-demo-1 driverzeng$ cloc --vcs=git . 1 text file.... 1 unique file. 0 files ignored.

3271 0

什么是jQuery？

write less do more】（2）免费，开源且轻量级的js库，容量很小注意：项目中，提倡引用min版的js库（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome 注意：jQuery...300)：设置对象的宽 height()：获取对象的高 height(500)：设置对象的高标签内容和属性 val()：获取value属性的值 val("")：设置value属性值为""空串，相当于清空...我们来使用这个方法来获取当前的时间，对这个方法熟悉一下：调用load方法的jquery对象，返回结果自动添加到jQuery对象代表的标签中间如果带参数就自动使用post，不带参数自动使用get。...User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates...User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates

3K7 0

初学web自动化测试--笔记1

，可以通过webdriver的API，向浏览器发送相应的request, 然后实现自动测试，比如自动点击，自动填写，自动滚动，自动切换窗口/标签页等。.../usr/bin/evn python from selenium import webdriver driver_file=/The/Web/Drive/File/Path #Change it...to your web driver's path. browser=webdriver.Ie(executable_path=driver_file) #Assume this is IE browser...在IE浏览器中，可能出现的情况是：向button元素发送的click 事件没有响应，那么在确保元素定位正确的情况下，可以用js 的方式进行点击，具体的方式是：找到元素对象element_obj，然后用...document.title document.URL document.readyState document.cookie document.domain 等待页面加载完成：在很多情况下，

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭