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

般来说，在对一个文件域(input type=”file”)使用了验证后，我们总会希望把文件域中的值给清空了（否则错误的文件仍然会被提交），而在IE中，安全设置的原因，是不允许更改文件域的值的（也就是不能使用val(“”)）

那么很显然，我们就只能换个思路，把这个input元素复制一个，然后将原来的删除。
在IE下复制元素的时候，其中的值是不会被复制的，所以就达到了清空文件域的目的了。
而在Firefox下，其中的值也会被一同复制，那么我们就顺便清空一下就做到兼容了。

代码如下：


代码如下:

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

赞 (0)

相关推荐

  • jQuery动态添加 input type=file的实现代码

    复制代码 代码如下: <form id="fileForm" action="" method="post" enctype="multipart/form-data"> <tr> <td> <input type="file" name="file"><input type="button" id="a

  • jquery(live)中File input的change方法只起一次作用的解决办法

    错误写法 复制代码 代码如下: $("#uploadImg").click(function(){ do something }); 正确写法 复制代码 代码如下: $("#uploadImg").live('change',function(){ do something });

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • 基于jQuery的图片大小自动适应实现代码

    关于 这个和以前弄的图片远处放大有许多相同的地方,比如图片预加载.有限容器显示无限大图片. 大小计算:内外两个比例. 复制代码 代码如下: // 容器比例和图片比例 var dr = dw/dh, ir = iw/ih; if(dr>ir){ ih = dh; iw = ih * ir; }else{ iw = dw; ih = iw / ir; } 居中显示:CSS绝对定位,负边距. 复制代码 代码如下: $img.css({width:iw,height:ih,position:'absol

  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

    网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o

  • jQuery限制图片大小的方法

    本文实例讲述了jQuery限制图片大小的方法.分享给大家供大家参考,具体如下: 最近在搞一个信息网站,文章内容中可以显示图片,所以就需要限制用户贴进去的图片的显示大小了. 在网上找到一段代码: $(document).ready(function(){ $("#viewnews_body img").each(function(){ var width = 620; var height = 600; var image = $(this); if (image.width() >

  • jQuery获取file控件中图片的宽高与大小

    问题 如何判断input file表单里上传的图片的宽高和大小呢? 解决方案 这个时候图片还没真正上传,也不是在页面上展示,不能使用$("#id").width(),$("#id").height()这种方式. 在Stack Overflow找到一个方法获取input file图片文件的宽高: var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { v

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

    般来说,在对一个文件域(input type="file")使用了验证后,我们总会希望把文件域中的值给清空了(否则错误的文件仍然会被提交),而在IE中,安全设置的原因,是不允许更改文件域的值的(也就是不能使用val("")) 那么很显然,我们就只能换个思路,把这个input元素复制一个,然后将原来的删除. 在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了. 而在Firefox下,其中的值也会被一同复制,那么我们就顺便清空一下就做到兼容了

  • jquery 清空file域示例(兼容个浏览器)

    复制代码 代码如下: var file = $("#FileId") file.after(file.clone().val("")); file.remove();

  • 改变文件域的样式实现思路同时兼容ie、firefox

    复制代码 代码如下: <body> <input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" /> <input id="ye" style="color: green;borde

  • jQuery跨域问题解决方案

    jQuery跨域问题解决方案

    通过XMLHTTPRquest请求不同域上的数据,原来js跨域访问是后台有个处理路径"/test"的函数.下面把具体解决方案介绍如下. 后台处理路径"/test"的函数: 复制代码 代码如下: //路径处理 app.get("/test",user.test); //处理函数 exports.test=function(req,res){     res.end("alert('JS跨域访问')"); }; 外部有一个网页需要

  • java.io.File的renameTo方法移动文件失败的解决方案

    java.io.File的renameTo方法移动文件失败的解决方案

    今天线上发现一个问题,发现一个定时移动文件的业务没有正常执行,结合日志和代码发现,移动文件是使用File类的renameTo方法,但是方法返回的都是false,表示文件移动失败. 出现这个问题我第一反应是不是文件权限的问题,但是和运维研究后发现的确不是权限导致的.既然不是权限的问题,那就看看renameTo的实现吧,查看源码发现该方法最终是通过一个本地方法实现的,看不到咋写的. 网上查了一下renameTo这个方法,发现这个方法确实存在一些问题,就是在不同的文件系统中移动是不会成功的.因为测试环

  • Ajax表单异步上传文件实例代码（包括文件域）

    1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

  • Ajax请求跨域问题解决方案分析

    本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo

  • PHP下ajax跨域的解决方案之window.name实例分析

    本文实例讲述了PHP下ajax跨域的解决方案之window.name.分享给大家供大家参考,具体如下: 原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给 window.name,页面A的iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出w

  • PHP下ajax跨域的解决方案之jsonp实例分析

    本文实例讲述了PHP下ajax跨域的解决方案之jsonp.分享给大家供大家参考,具体如下: 首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test", "age": "25", "sex": "男" }; var data = [1, 2, 3, 4, 5]; 而jsonp是

  • jquery+springboot实现文件上传功能

    本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-w

随机推荐