input file 选择文件后，修改源文件名称或删除源文件，会导致上传失败？

Question

需求场景就是普通的文件上传，但遇到了这样一个问题，步骤如下

• 基于 input file 实现一个文件选择组件
• 选择文件后，修改源文件名称或删除源文件
• 点击上传，浏览器报错：net::ERR_FILE_NOT_FOUND，文件查找失败
  

我理解 input file 选择文件后得到的 File对象 应该包含了文件流，但这个现象是上传时 浏览器 还会去读取源文件？找了一圈没看到相关资料，有经验的朋友解答一下 thx

Answer 1

使用<input type="file" />选择的文件，最后的结果返回是一个文件对象，注意是文件对象不是文件本身，MDN上的文件对象说明

MDN上面提到了File对象特殊类型的Blob，Blob是二进制对象，但是它也不是文件流，只不过它可以通过FileReader来转变为文件流，所你说的File对象包含文件流是不正确的，应该说File对象可以通过FileReader来获取文件流。

然后就是你的问题没找到答案，其实答案在规范里面，规范File API

这个规范中提到File对象可以通过两种方式创建：

1. 通过构造函数在 Web 应用系统中创建；
2. 来自底层的文件系统的文件字节序列的引用；

很明显通过<input type="file" />选择的文件肯定不是通过构造函数创建出来的；

后面还提到如果是来自文件系统的字节序列的引用，那么这个对象的快照状态应该是这个磁盘上的文件状态。

注意这里是快照状态，快照可以理解为备份，最终这个File对象是引用文件系统上的文件，只是备份了状态，并不包含文件流，所以你删除了这个文件，或者重命名这个文件，是无法同步通知到这个快照状态的，这个时候因为引用的源文件丢失，最后的结果肯定是报错。

如果你想拿到文件流，可以通过上面提到的FileReader对象来获取，在选择文件之后立马获取文件流，不过你如果在选择完文件之后，立马删除文件能不能获取到文件流就不确定了，这个时候文件应该是锁定状态，删除不了，没有测试，只是猜测。

Answer 2

input获取到的 FileList 的官方解释是

一个 FileList 对象通常来自于一个 HTML <input> 元素的 files 属性，你可以通过这个对象访问到用户所选择的文件。

而要获取文件流还需要用 FileReader 来读取File对象，最重要一点，读取文件流是异步的，读取大文件也会很耗时。