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

Question

在网页制作中，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 文件域的值了。