HTML5 input file 图片上传，压缩，上传，预览代码,Js代码库,德仔网

代码语言

代码分类

【Js】 HTML5 input file 图片上传，压缩，上传，预览

作者: / 发布于2018/10/19/ 1071

<input type="file" id="textfile" accept="image/*"/>上传

<div class="upP_img1"></div>预览框



$('#textfile').on('change', function() {

? ? ? ? var reader = new FileReader();//新建获取file的读取文件
? ? ? ? var imgsrc = null;
? ? ? ? ?var _file = this.files[0], ?//获取的的图片
? ? ? ? ? ? fileType = _file.type; ?//图片类型
? ? ? ? ? ? console.log(fileType); ?
? ? ? ? reader.readAsDataURL(this.files[0]);//输出base64图片
? ? ? ? reader.onload = function(e) {//字面理解是加载图片，得到结果吧，不是很理解
? ? ? ? ? ? imgsrc = this.result;//输出结果
? ? ? ? ? ? // 压缩
? ? ? ? ? ? var image=new Image();//新建图片
? ? ? ? ? ? image.src=imgsrc;
? ? ? ? ? ? image.onload=function(){
? ? ? ? ? ? ? ? var cvs=document.createElement('canvas');//画布
? ? ? ? ? ? ? ? var cvx =cvs.getContext('2d');//
? ? ? ? ? ? ? ? // draw image params
? ? ? ? ? ? ? ? cvs.width=this.width;
? ? ? ? ? ? ? ? cvs.height=this.height; ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? cvx.drawImage(this, 0, 0,this.width,this.height);//画图
? ? ? ? ? ? ? ? var newImageData = cvs.toDataURL(fileType,0.2);//这是压缩，具体的看.toDataURL api 输出base64
? ? ? ? ? ? ??
? ? ? ? ? ? ? ? console.log(newImageData);

? ? ? ? ? ? ? ? $('.upP_img1').html('<img id="newimg" src="' + newImageData + '">');
? ? ? ? ? ? ? ? console.log(this.width+'--'+this.height);
? ? ? ? ? ? ? ? // 上传图片后的以宽高充满判断 ? ?
? ? ? ? ? ? ? ? var imgscale2 = this.width / this.height;
? ? ? ? ? ? ? ?var photoscale2 = $('.upP_img1').width() /$('.upP_img1').height();
? ? ? ? ? ? ? ? if (imgscale2 > photoscale2) {
? ? ? ? ? ? ? ? ? ? $('#newimg').css({ "width": "100%", "height": "auto" });
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? $('#newimg').css({ "width": "auto", "height": "100%" });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? });

$.ajax({

url:url,

type:post,

data:JSON.stringify($('#newimg').attr('src'))，success:function(){},error:function(){}

});



值得一提的是，canvs画出来的图片比上传的原图片要大，39k的原图画出来有180k 这是最骚的，5m压缩20%出来有500k。
--------------------- 
作者：炳就 
来源：CSDN 
原文：https://blog.csdn.net/qq_16591861/article/details/74202135 
版权声明：本文为博主原创文章，转载请附上博文链接！

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label