在项目中经常遇到需要将本地图片上传至服务端的情况，免不了要本地预览选择的图片，图片太大的情况下还需要对图片进行一番压缩，通过最近做的项目，对这几种图片处理情况做一个总结。

本文主要解决的问题：

1.图片在线预览功能

2.图片压缩

3.通过formData 对象上传图片

图片在线预览功能：

需要了解的内容：

FileReader 对象

html5为读取上传文件的数据所提供的对象，它包含以下几个方法：

readAsBinaryString（Blob/file）：把文件内容以二进制的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。

readAsText（Blob/file， "utf-8"）：把文件内容以文本字符串的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。（可以为它指定编码格式）

readAsDataURL(Blob/file) :把文件内容以DataURL的方式读取，并放在FileReader的result属性中，它接受Blob对象或者文件对象。

什么是Blob对象？

Blob对象就是选择文件的原始数据类型，它提供slice方法可以读取原始数据中某一块数据，如果上次文件较大，可以利用Blob可切割的特性将文件分批次上传。

我们的主要思路是将选择的图片文件转换成DataURL的形式，再把dataURL赋给img标签的src属性即可，因此我们的第一种方法是利用FileReader 的readAsDataURL方法，转换为我们想要的数据格式。

首先，在html里创建一个选取文件的元素：

再创建一个在线预览的按钮和显示区域：

js中的操作（readAsDataURL的方式）：

varreadAsDataURL=document.querySelector("#readAsDataURL");

varimg=document.querySelector("#img");

readAsDataURL.addEventListener("click",function(){

////获得文件

varfiles=document.querySelector("#upload").files;

if(files.length>0){

////创建FileReader对象

varreader=newFileReader();

////将文件以dataURL读取， 把文件放在了reader.result上

reader.readAsDataURL(files[0]);

////读取完毕，执行后续操作

reader.onload=function(){

img.setAttribute("src",this.result);

}

}

});

除此之外，还可以利用window.URL中的createObjectURL方法，该方法可以生成一个url对象，不仅能实现预览功能还可以对文件进行下载。

varcreateObjectURL=document.querySelector("#createObjectURL");

varimg=document.querySelector("#img");

createObjectURL.addEventListener("click",function(){

varfiles=document.querySelector("#upload").files;

if(files.length){

varurl=window.URL.createObjectURL(files[0]);

////可实现图片预览功能

img.setAttribute("src",url);

}

});

下载创建a标签：

vara=document.createElement("a");

a.href=url;

a.download="usual";

a.innerHTML="下载";

////添加到body

document.body.appendChild(a);

图片压缩：

思路：

1.读取图片 readAsDataURL

2.创建image对象，获取图片的原始尺寸大小

3.创建canvas，把图片付给canvas，绘制，设置绘制的大小这就相当于压缩canvas.drawImage(img, 0, 0, height, width)

4.把canvas又转成dataURL的形式。压缩完成

首先以readAsDataURL的方式读取文件,创建image对象，以便获取图片的原始尺寸大小：

uglify.addEventListener("click",function(){

varfiles=document.querySelector("#upload").files;

varimg=newImage(),single=true;

vartype="";

if(files.length){

varfileReader=newFileReader();

type=files[0].type;

fileReader.readAsDataURL(files[0]);

fileReader.onload=function(){

img.src=this.result;

};

}

});

result赋给img的src后，监听img是否加载完成，进行下一步操作：

img.onload=function(){

////因为后面会再次修改img的src属性，为了避免死循环

if(!single){

return;

}

////获取原始图片的宽度和高度

varsheight=img.height;

varswidth=img.width;

////创建canvas

varcanvas=document.createElement("canvas");

varcvs=canvas.getContext("2d");

////缩小图片的尺寸，等同于压缩

canvas.height=sheight*0.6;

canvas.width=swidth*0.35;

////在画布上得到压缩的图片

cvs.drawImage(img,0,0,sheight/2,swidth/2);

////type是原图片的类型

varresultData=canvas.toDataURL(type);

single=false;

img.src=resultData;

document.body.appendChild(img);

};

图片上传：

利用formData对象可以使用一系列的键值对来模拟一个完整的表单文件，然后用ajax发送这个表单。

//创建formData对象:

vardata=newFormData();

//添加参数，通过append

varfiles=document.querySelector("#upload").files;

data.append("file",files[0]);

//通过ajax 发送

varxml=newXMLHttpRequest();

xml.open("post","url");

xml.send(data);

xml.onreadystatechange=function(value){

if(xml.readyState==4){

////......

}

}