测试环境:
OS --> winXP
Browsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, Chrome 2.0.172

xhtml:
<input type="file" value="选择文件" id="fileInput" />
<button type="button" id="btnClear">清空文件域</button>

JS:
<script type="text/javascript">
var btn = document.getElementById("btnClear");
var file = document.getElementById("fileInput");
btn.onclick = function() {
  // for IE, Opera, Safari, Chrome
  if (file.outerHTML) {
    file.outerHTML = file.outerHTML;
  } else { // FF(包括3.5)
    file.value = "";
  }
}
</script>

或者

var file = $("#file")
file.after(file.clone().val(""));
file.remove();

参考: http://blog.163.com/thinker_creator/blog/static/101933149200961585128272/
    http://www.jb51.net/article/35491.htm

清空file input框的更多相关文章

  1. [JS] 如何清空file input框 [整理]

    测试环境:OS --> winXPBrowsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, ...

  2. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

  3. 类似input框内最右边添加图标,有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. [Selenium] 使用Javascript选中Input框里的内容,然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  5. 给“file”类型的input框赋值的问题

    开发"新闻编辑"功能时,会遇到给"file"类型的input框赋值的问题,用来展示之前上传的文件,但由于file类型的input框受到安全限制,所以不能被赋值, ...

  6. file类型input框设置上传相同文件,并都可以触发change事件。

    在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...

  7. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  8. 百度小程序-form表单点击提交,input框内容不会清空

    百度小程序与微信小程序相似度90%.微信小程序转换为百度小程序,部分还是需要人工修改! 做了一个form留言表单,点击提交之后,input框第一次会清空,但是第二次就不会清空了! 不多说直接上代码! ...

  9. 让单选input框,不在被选中,添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

随机推荐

  1. 对RESTful Web API的理解与设计思路

    距离上一篇关于Web API的文章(如何实现RESTful Web API的身份验证)有好些时间了,在那篇文章中提到的方法是非常简单而有效的,我在实际的项目中就这么用了,代码经过一段时间的磨合,已经很 ...

  2. JS结合DOM事件的例子

    // 这是初始文字 右边是一个测试文本框: 鼠标划过.点击.松开上面的文字都会有不同的效果,鼠标光标移到.离开文本框也会有不同的效果. 首先新建一个html文件 <!DOCTYPE html&g ...

  3. 利用Maven管理工程项目本地启动报错及解决方案

    目前利用Maven工具来构建自己的项目已比较常见.今天主要不是介绍Maven工具,而是当你本地启动这样的服务时,如果遇到报错,该如何解决?下面只是参考的解决方案,具体的解法还是得看log的信息. 1. ...

  4. Volly框架的使用基础版及使用中的一些坑 Ace 网络篇(三)

    直接把注释粘过来: * Volley使用讲解: * 要实现网络数据请求主要要记住下面三步骤: * 1.创建RequestQueue对象 * 2.创建XXRequest对象(XX代表String,JSO ...

  5. linux实践——简单程序破解

    一.运行login可执行程序,屏幕显示需要输入密码,随便输入一串字符,结果是Drop dead! 二.objdump -d login,对login进行反汇编,找到main函数,找到含有scanf的那 ...

  6. coreData,sqlite3,fmdb对比

    core data   core data 基于model-view-controller(mvc)模式下,为创建分解的cocoa应用程序提供了一个灵活和强大的数据模型框架.   core data可 ...

  7. ASP.NET MVC 5 入门教程 (1) 新建项目

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-create-project.html 下一节:ASP.NET ...

  8. spring+mybatis实现读写分离

    springmore-core spring+ibatis实现读写分离 特点 无缝结合spring+ibatis,对于程序员来说,是透明的 除了修改配置信息之外,程序的代码不需要修改任何东西 支持sp ...

  9. OpenStack Newton:集虚拟化,裸金属和容器部署的统一云平台(转载)

    2016-10-08木屐大数据在线 国庆长假第六天,OpenStack第十四版本Newton(牛顿?)发布,官方介绍中强调这是一个集虚拟化.裸金属和容器技术的一体化平台,可通过一套API来管理裸金属. ...

  10. c#批量插入示例

    var sql = @"Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MvcApplication1-20131029153010;I ...