jquery如何清空input file文件域的值?jquery能不能获取和设置input file文件域的值?

发布:2015-04-30 08:05   点击997次   评论:0
jquery如何清空input file文件域的值?jquery能不能获取和设置input file文件域的值?

在网页制作中,input file文件域一般我们都用于上传文件,对于input file文件域选定文件以后,我们能不能读取其中的内容呢?通过下面的方法我们可以获取到其中的内容:

html代码

<form enctype="multipart/form-data" method="post" action="http://www.uedsc.com">
    <input id="file" type="file" name="file">
    <input id="submit" type="submit" name="submit">
</form>
注意:上传文件的表单必须设置enctype为multipart/form-data类型。

php方法(必须提交给服务器以后才能获取)
if(isset($_POST['submit'])){
    print_r($_file['file']);
}
js方法(直接在客户端获取,可能需要高版本的浏览器支持)
function fileSelected() {
  var file = document.getElementById('fileToUpload').files[0];
  if (file) {
    var fileSize = 0;
    if (file.size > 1024 * 1024)
      fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    else
      fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
    document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  }
}
代码来源:http://www.uedsc.com/html5-to-upload-files.html

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

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

var file = $("#file")
file.after(file.clone().val(""));
file.remove();
最后,我们能不能设置/更改input file文件域的值呢?
答案是不可以,如果可以设置,网站就会很容易攻击客户端。这是不可能的设置成功的。做这个控件的人早已想到这一点。所以就不要去妄想更改input file文件域的值了。

关于 GitHub 导航 部门 反馈

提示:`/home.php`入口数据仅为演示功能,不构成任何交易凭证,也不承担相关风险和责任!

Copyright © 2011-2018 xxxxx.com All rights reserved.

Run:3.654/37.137(ms); 7(sql)/2.883(MB); comm:news/detail; Upd:2024-11-15 19:31:51