使用FileReader实现图片预览与上传

1. 在 HTML 里定义一个 input 元素,我们指定 accept="image/*" 属性来实现默认上传image格式的文件,div用来预览图片。

2. 选择 input 并且给该元素添加 change 事件,即 input 的值改变时运行我们的 update 函数

const fileEle = document

.getElementsByClassName("test-file")[0],

imgBox = document

.getElementsByClassName("pre-file")[0];

fileEle.addEventListener("change", update);

3. 这里通过 this.files 来获得 input 选择的文件列表,在 chrome 浏览器下通过toString.call(files) 显示 [object FileList] 即 files 是 FileList 对象,使用 for of 来遍历该对象

function update(e){

const files = this.files;

imgBox.innerHTML = "";

for (const v of files) {

readFile(v);

}

}

4. 通过 toString.call(v) 方法得到遍历出来的是 File ,我们可以通过 FileReader 对象来读取 File 对象, FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。FileReader 对象通过 readAsDataURL 方法将文件读取为DataURL,result就是文件的base64字符。直接把 base 赋值给 img 的 src 属性就能实现图片的预览了。

function readFile(v) {

const fr = new FileReader();

fr.onload = e => {

const base = e.target.result,

img = document.createElement("img");

img.src = base;

"width: 200px;max-height: 200x;";

imgBox.appendChild(img);

toBlob(base);

}

fr.readAsDataURL(v);

}

5. 现在预览实现了,我们还需要把文件上传到服务器,我们把 base 转换成 blob 对象类型进行上传

function toBlob(base) {

let blob = null;

const code =window.atob(

base.split(",")[1]),

aBuffer =new window.ArrayBuffer(

code.length),

uBuffer =new window.Uint8Array(

aBuffer);

const l =code.length;

for(let i = 0, len = l; i

uBuffer[i] = code.charCodeAt(i) & 0xff ;

}

blob = new Blob([uBuffer]);

console.error(blob);

}

Leither公会

干货好文,请继续关注

前端掌握未来

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180612G0L41400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券