jQuery 如何清空 Input File 文件域的值?jQuery 能不能获取和设置 Input File 文件域的值?

发布于 2018-06-25 16:40:52 字数 2223 浏览 2708 评论 0

在网页制作中,Input File 文件域一般我们都用于上传文件的时候选择文件,例如有下面一个最基本的网页表单,一个文件域和一个按钮:

<form enctype="multipart/form-data" method="post" action="/">
    <input id="file" type="file" name="file">
    <input id="submit" type="submit" name="submit">
</form>

注意:上传文件的表单必须设置 enctype 为 multipart/form-data 类型。

对于 Input File 文件域选定文件以后,我们能不能读取其中的内容呢?通过下面的方法我们可以获取到其中的内容:

PHP 方法

这个方法是必须提交给服务器以后才能获取,而且所有的后台编程语言都能获取上传文件的信息。

if(isset($_POST['submit'])){
    print_r($_file['file']);
}

JavaScript 方法

这个方法能够直接在客户端获取,可能需要高版本的浏览器支持,使用 JavaScript 的 File API 能够获取到文件的大小、格式、和名称。

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;
  }
}

如何清空 Input File 文件域的值呢?

一般来说,在对一个文件域 Input File 使用了验证后,我们总会希望把文件域中的错误的值给删除了,否则错误的文件仍然会被提交,而由于浏览器的安全设置的原因,是不允许更改文件域的值,也就是不能使用 val() 方法,否则服务端就可以任意的攻击客户端,获取客户端的文件。

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

实现代码如下:

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

另外作为开发人员,你可能会想到下面的一些方法来清空文件域的值,这些方法中有的对有的错:

【√】$("#file")[0].value = "";
【√】$("#file")[0].value = null;
【×】$("#file").attr("value","");
【×】$("#file").attr("value",null);
【√】$("#file").val("");
【√】$("#file").val(null);

.val() 设置的是 Input 的 Value 属性,input 是 HTMLInputElement 的实例,value 是通过 setter 方法定义的,当被赋值时,就会把值写到 input 里面,而改变 value 属性的方法,实际上操作的是 dom 的 value 属性,会触发浏览器的 repaint,更新 input 的值。

我们能不能设置/更改 Input File 文件域的值呢?

答案是不可以,如果可以设置,网站就会很容易攻击客户端。这是不可能的设置成功的。做这个控件的人早已想到这一点。所以就不要去妄想更改 Input File 文件域的值了。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。