首先，前端无法像原生一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发，通过input type=”file” 选择本地文件，通过拖拽的方式把文件拖过来在编辑框里面复制粘贴，通常还会自定义一个按钮，然后盖在它上面，因为type=”file”的input不好改变样式。
然后，可以用FormData获取整个表单的内容，把input的value和formData打印出来是这样的，可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet，但并不是说它的内容是空的，只是它对前端开发人员是透明的，无法查看、修改、删除里面的内容，只能append添加字段。
然后，把原始的File对象打印出来是这样的，它是一个window.File的实例，包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。如果需要限制上传文件的大小就可以通过判断size属性有没有超，单位是字节，而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准，而通过这种判断会比较准。上面的代码使用了一个正则判断，如果是一张图片的话就把它赋值给img的src，并添加到dom里面，但其实这段代码有点问题，就是web不是所有的图片都能通过img标签展示出来。
然后，实例化一个FileReader，调它的readAsDataURL并把File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。其它的主要是能读取为ArrayBuffer，它是一个原始二进制格式的结果。它对前端开发人员也是透明的，不能够直接读取里面的内容，但可以通过ArrayBuffer.length得到长度，还能转成整型数组，数据在drop事件的event.dataTransfer.files里面，拿到这个File对象之后就可以和输入框进行一样的操作了，即使用FileReader读取，或者是新建一个空的formData，然后把它append到formData里面。
然后，直接在输入框里面添加一张图片，blob是一种类文件的存储格式，它可以存储几乎任何格式的内容，能得到它的大小和类型，但是具体内容也是不可见的，它有一个slice的方法，可用于切割大文件。还能使用window.URL读取，这是一个新的API，经常和Service Worker配套使用，因为SW里面常常要解析url。关于src使用的是blob链接的，除了上面提到的img之外，另外一个很常见的是video标签，如youtobe的视频就是使用的blob，这种数据不是直接在本地的，而是通过持续请求视频数据，然后再通过blob这FileReader读取得到的base64或者ArrayBuffer二进制格式，如果直接就是一个FormData了，那么直接用ajax发出去就行了，因为jQuery会自动把内容做一些转义，并且根据data自动设置请求mime类型，这里告诉jQuery直接用xhr.send发出去就行了。
最后，通过input控件在input.files可以得到File文件对象，通过拖拽的是在drop事件的event.dataTransfer.files里面，而通过粘贴的paste事件在event.clipboardData.files里面，Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签，可以通过发送一个请求加载本地的blob数据，然后再通过FileReader读取，或者直接append到formData里面。得到的File对象就可以直接添加到FormData里面，如果需要先读取base64格式做处理的，那么可以把处理后的base64转化为blob数据再append到formData里面。前端处理和上传本地文件应该差不多就是这些内容了，但是应该还有好多细节没有提及到。
上述方法为小编整理所得，希望能够帮助到大家。