网页图片上传到服务器,Js（基于jQuey）网页端压缩图片后上传服务器

enctype="multipart/form-data">这种模式，另一种是方式就是通过文件的base64位编码，然后上传这段code后端解析这段code，这样便可以脱离文件本身。

(2)通常上传图片的时候是通过表单控件来上传，可不可以通过获取图片链接压缩这个图片后来上传呢，这样是不行的，首先目前很多浏览器从隐私的角度上看，是不允许获取到完成的图片路径的，其次要是我们真的压缩了文件，那不是改变了源文件，也道理上也是不允许的，浏览器只能引用这个图片。

(3)综合上述两点，通过获取文件的base64位编码来上传图片是比较合理的，就需要通过浏览器压缩原有的图片得到压缩图片的base64位图片的code上传。

技术分析：需要浏览器支持h5，然后使用h5内置的canvas技术来压缩图片，目前主流的浏览器都已经支持h5，尤其是在wap端，可以放心使用，不过在pc上，一些低版本的浏览器可能不支持，需要适当做好兼容性。具体情况可以参考这篇文章，https://www.zhihu.com/question/19613759。

代码呈现：这里通过一段完整的ajax方式来展示图片的压缩过程(基于jQuery环境，请在头部添加)。

//核心代码 压缩图片并返回base64code ratio表示图片质量0-1之间

function resizeImage(img,width,height,ratio){

var canvas, ctx, baseCode64;

canvas = document.createElement('canvas');

canvas.width = width;

canvas.height = height;

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

ctx.drawImage(img, 0, 0, width, height);

baseCode64 = canvas.toDataURL("image/jpeg", ratio);

return baseCode64;

}

/*

*在你的网页里面应该有一个元素

*

*/

function startUpload(obj){

var input=obj;

if(input.files){

var imageName=obj.files[0];//获取file文件名

//读取图片数据

var f = input.files[0];

/***************************核心代码 reader方法读取图片 start************************/

var reader = new FileReader();

reader.onload = function (e) {

var data = e.target.result;

//加载图片获取图片真实宽度和高度

var image = new Image();

image.οnlοad=function(){

var width = image.width;

var height = image.height;

//图片预判断，获取上传图片的的大小

if(width<640){

alert("图片的长不能小于640像素！");

}else if(height<480){

alert("图片的宽不能小于480像素！");

}

//图片上传

else{

var base64=resizeImage(image,width,height,1);

//$('body').html('

');return;调试图片的压缩结果

var url=$(obj).data('remote');

//发起异步传输请求，将压缩后图片的base64编码发送到服务器供解析

$.ajax({

type:'post',

url: url, //用于文件上传的服务器端请求地址

data:{

image:base64,

image_name:imageName

},

dataType: 'json', //返回值类型 一般设置为json

success: function (rs) //服务器成功响应处理函数

{

//服务器响应成功处理函数，您可以在里面进行数据处理

},

error: function (data, status, e)//服务器响应失败处理函数

{

alert(e);

}

});

}

};

image.src= data;

};

reader.readAsDataURL(f);

/**核心代码 reader方法读取图片 end****/

}else{

alert("未检测到图片！");

}

}

技术点总结：

(1)Js压缩前端图片

(2)base64位图片编码

(3)获取file控件的文件名

(4)Js获取图片文件的长度和宽度