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