web前端之——图片上传

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

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

　　 一、实现图片及时预览，将用户选中的图片及时显示在前台页面（利用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代码：

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

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

 

css样式：

<style>
    ul{
      list-style: none;
    }
    li{
      float: left;
      border: 1px solid #000;
      margin: 10px;
    }
    li img{
      display:block;
    }
    div{
      width: 0%;
      height: 20px;
      background-color: lightcoral;
    }
  </style>

 

页面效果是这样子：

1、上传 单个图片 的js代码：

 function getFileContent(){
　　// file[0]就是上传的图片本身
　　// FileReader的readAsDataURL方法可以将图片转换为base64格式
　　// 1.上传单个文件时： 
      var reader = new FileReader();
      var file = document.querySelector("#myFile").files;
      reader.readAsDataURL(file[0]);
      // 一定要在文件读取 成功完成时 再进行相应的操作：
      reader.onload = function(){
          document.querySelector("img").src = reader.result;
      }
  }

 

其中file打印出是：里面包含用户上传的文件名称、大小、类型，如果想限制图片大小和类型，可以自行添加判定条件~

2、上传 多个图片 的js代码：

    每上传一张图片（一个文件）就需要创新创建一个 FileReader 实例，否则会出现一些问题（只成功上传了选中的最后一张图片）；

　这里将上传单个图片封装为一个函数，在循环遍历用户选择的文件时，一一上传图片，每个图片都有上传时的进度条。

function getFileContent(){
      // 上传多个文件时：
      var file = document.querySelector("#myFile").files;
      var totalSize = 0;
      // 限定文件总数不能超过的大小
      var maxSize = 10*1024*1024; 
      for(var i=0;i<file.length;i++){
        totalSize += file[i].size;
        if(file[i].size > maxSize){
          alert("文件不能超过10M")
          return false;
        }else{
          // 调用上传多个图片的方法，传入的参数为：用户选中的文件 和 每个图片的 index
          uploadMultiImg(file,i);
        }
      }
 }

// 上传多个图片的方法：
    function uploadMultiImg(file,index){
        var li = document.createElement("li");
        ul.appendChild(li);
        var img = document.createElement("img");
        li.appendChild(img);
        /*1.1 由于IE9以下没有FileReader，因此先判断是否支持FileReader  并且  创建文件读取对象*/
         if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        // 1.2 是否是图片
        var imageType = /^image\//;
        if(!imageType.test(file[index].type)) {
          alert("请选择图片！");
          return;
        }
         /*2.读取文件，获取DataURL
        * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
        * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
        * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/
        reader.readAsDataURL(file[index]);
        /*获取数据*/
        reader.onload = function(){
          /*展示：图片路径设置为读取的图片*/
          img.src = reader.result;
          img.style.width = \'300px\';
          img.style.height = \'300px\';
        }

        // 进度条
        reader.onprogress = function(e){
          var percent = e.loaded / e.total * 100 + \'%\';
          div.style.width = percent;
          var number = (e.loaded / e.total * 100).toString().substring(0,5) + \'%\';
          div.innerText = number;
        }
    }

进度条是通过reader.onprogress()方法实现，打印e：loaded是已上传的大小，total是文件总大小。通过二者的比例可以自定义一个进度条。

最终效果：

二、将图片上传到服务器中（FormData对象）

参考文章：

https://blog.****.net/lijia_1983370657/article/details/80489979

https://blog.****.net/thunderevil35/article/details/80953236

https://www.cnblogs.com/hutuzhu/p/4409292.html

 

使用 h5的 formData 对象 用ajax异步的方式提交form表单（还可以实现异步提交文件）

 在使用 jquery 发送图片到后台时要注意几点：

•  <form>标签添加 enctype="multipart/form-data" 属性
•  jQuery 的 ajax 中 processData 设置为 false （表示不需要对数据做处理）
•  jQuery 的 ajax 中 cache 设置为 false （表示上传文件不需要缓存）
•  jQuery 的 ajax 中 contentType 设置为 false （因为前面已经声明了是‘FormData对象’）

 如果没有<form>标签，也没有 enctype="multipart/form-data" 属性,可以使用 FormData 的 append() 方法来手动添加 如用户名、文件等内容。

var formData = new FormData($(\'#form1\'));
// formData.append(\'images\', $(\'#myFile\')[0].files);
//ajax请求
$.ajax({
            type: "post",
            url:  "接口地址",
            data: formdata,
            dataType: \'json\',
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            xhrFields:{withCredentials:true},
            async: true,    //默认是true：异步，false：同步。
            success: function (data) {
                callback(data);
            },
            error: function (data) {
                layer.msg(\'请求异常\');
            },
});

如果使用原生js实现，如下代码：

function fsubmit() {
       var form=document.getElementById("form1");
       var formData=new FormData(form);
       var oReq = new XMLHttpRequest();
       oReq.onreadystatechange=function(){
           if(oReq.readyState==4){
              if(oReq.status==200){
                  var json=JSON.parse(oReq.responseText);
                  var result = \'\';
                  // result += \'name=\' + ret[\'name\'] + \'<br>\';
                  // result += \'gender=\' + ret[\'gender\'] + \'<br>\';
                  result += \'<img src="\' + json[\'photo\'] + \'" width="100">\';
                  $(\'#result\').html(result);
              }
            }
        }
        oReq.open("POST", "server.php");
        oReq.send(formData); 
        return false;
}