web前端之——图片上传

本文主要讨论以下两部分：

　　 一、实现图片及时预览，将用户选中的图片及时显示在前台页面（利用FileReader实现）；不用通过后台接口返回的图片地址赋值给src再展示到前台，减少前后台的频繁交互；

　　 二、通过后台接口，将图片上传到服务器中（FormData）。

---

 

首先介绍一下h5新增的FileReader对象（）：

FileReader:读取文件内容

   1. readAsText(): 读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8

   2. readAsBinaryString(): 读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

   3 . readAsDataURL(): 读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式) 嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

   4. abort():中断读取

 

FileReader 提供一个完整的事件模型，用来捕获读取文件时的状态

　- onabort: 读取文件中断片时触发

　- onerror: 读取错误时触发

　- onload: 文件读取成功完成时触发

　- onloadend: 读取完成时触发，无论成功还是失败

　- onloadstart: 开始读取时触发

　- onprogress: 读取文件过程中持续触发

 具体可以参考 https://www.cnblogs.com/hhhyaaon/p/5929492.html ，介绍的很详细。

一、实现图片及时预览

首先是html代码：

1 <form action="" enctype="multipart/form-data" method="post" name="form1" id="form1">
2    文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent();" multiple>
3      <!-- 进度条 -->
4       <div></div>
5     <input type="submit">
6   </form>

7   <!-- 图片展示区域 -->
8   <ul id="imgList"></ul>

 

css样式：

 1 <style>
 2     ul{
 3       list-style: none;