HTML5的FileReader对象实现图片预览及上传

一、关于FileReader；

1、FileReader即构造函数（构造对象），所以必须和 new 一起使用！

2、FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个input元素上选择文件后返回的Filelist对象,也可以来自拖放操作生成的DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行mozGetAsFile()方法后返回结果.

创建一个FileReader 对象很简单,如下:

let reader = new FileReader(); //返回一个新构造的FileReader

3、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

1. readAsBinaryString(file) : 将文件读取为二进制编码,

2. readAsText(file,[encoding]) : 将文件读取为文本,

3. readAsDataURL(file) : 将文件读取为DataURL,

4. abort(none) : 中断读取操作.

4、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

  事件	         描述
onabort	      中断时触发
onerror	      出错时触发
onload	      文件读取成功完成时触发
onloadend	  读取完成触发，无论成功或失败
onloadstart	  读取开始时触发
onprogress	  读取中

5、通过FileReader对象实现图片预览及上传：

FileReader 的 readAsDataURL（）方法可以将图片转化成data64位的字符串，即可以将图片以字符串参数存入数据库。这样的的优势在于：前端可以少对一个接口（后台少写个接口）。最重要的是服务器不会储存垃圾文件！

//首先检测浏览器对FileReader的兼容性
if(window.FileReader) {  //支持 or  if(typeof FileReader != 'undefined'){  
  alert("支持！");
}else {  
  alert("不支持！");  
}  

//html代码和 css 代码
//.upload-pic-box{width:120px;height:120px;position:relative;}
//.upload-pic-box img{width:120px;height:120px;}
//.upload-pic-box input{width:120px;height:120px;position:absolute;left:0px;top:0px; opacity:0;}

<div className="upload-pic-box">
    <img src={this.state.fileUrl} alt="" id="portrait"/>
    <input id="uploadImage" type="file" name="file" onChange={this.showPreview}/>
    //<input type="file" multiple name="" id="uploadImage" value="" accept="image/jpeg,image/png">
    //multiple 支持多个文件同时上传 accept：设置当前file支持的文件格式
</div>

//js代码
showPreview = (ev) => {
      var _this = this;
      var file = ev.target.files[0];
      //获取文件类型
      const fileType = file.type;
      //检测是否为图像文件 
      if(!/image\/\w+/.test(file.type)){  
        alert("该文件不是图片类型，请重新选择！");  
        return;  
      } 
 
      //获取图片大小,file.size获取到的单位为 B，将其转换为kb，并保留二位小数点
      const  fileSize =(file.size / 1024).toFixed(2);
      if(Number(fileSize) > (1024 * 1024)){
         message.warn("图片不能大于1M!");
         return;
      }
      if(window.FileReader) {  
          var fr = new FileReader();  
          fr.onloadend = function(e) { 
              // e.total:文件总大小 e.loaded:当前已下载大小 e.target.result:文件转化结果
              //document.getElementById("portrait").src = e.target.result;
              _this.setState({
                 fileUrl: e.target.result
               });
              //缓存当前64位url  
              _this.state.uploadPicData = e.target.result;
          };  
          fr.readAsDataURL(file);  
      }  
  }

参考文献：

https://www.cnblogs.com/exhuasted/p/6170562.html

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

http://blog.csdn.net/jackfrued/article/details/8967667

http://blog.csdn.net/tonvchong/article/details/22193435

http://blog.csdn.net/u014236259/article/details/52885591

感谢！

HTML5的FileReader对象实现图片预览及上传

猜你喜欢