File、FileReader、FormData

File、FileReader、FormData

近期因业务需要，重新学习了一下下html的上传文件，把一些在文件方面常见的概念理理清楚，方便日后回顾。

File

File，顾名思义就是文件，千万要和FileReader进行区分。File继承自Blob，是二进制的大对象，File有一个很重要的方法就是File.slice()，可以实现对大文件的分段截取。在html中，File可以来自于的FileList,也可以来自于拖拽事件。

FileReader

FileReader是用来把File读进javaScript的api，读取文件内容以后，可以有后续的操作，比如利用readAsDataURL实现预览图片等等。

FormData

FormData的出现，是为了解决在Ajax中频繁用到的序列化操作而制定，采用formData.append("webmasterfile", blob);这样的方式来自动对数据进行序列化，从而利用XMLHttpRequest对序列化后的数据进行发送。

上传文件

利用以上几点，实现上传文件的时候，可以先使用FileReader来读取文件内容，然后再使用FormData进行上传。当然，这样的操作需要把文件内容读取进js，其实完全不必要，formData.append("webmasterfile", file)这样的方式可以直接在不读取文件内容的情况下，把文件当成普通的表单数据来上传。

图片预览

图片预览的本质就是在读取文件后，将图片的url赋值给img.src，实现的方式和文件上传一样，同样可以有两种。1.读取图片的内容，然后使用FileReader的readAsDataURL方法，把读取到的dataURL赋值给img.src，dataURL长这样

data:image/jpeg;base64,/9j/4R/+RXhpZgAATU0AKgAAAAgACgEPAAIAAAAGAAAAhgEQAAIAAAAJ...

dataURL会很长很长。2.另外一种比较优雅的方式是在不读取文件内容的情况下，利用window.URL.createObjectURL(file)，生成文件在内存中的地址uri赋值给img.src，地址uri长这样

blob:null/a6d04e25-c6e9-4c7d-b1c4-ecf8dab60e35；

简短很多，也节省了把文件读取进js的操作。