input file 上传图片及压缩

大致需求为：可上传图片，同时压缩图片大小（因为手机图片一般都会有几兆，原图上传会耗损过多资源）；并且可以上传之后显示出来，再提交给服务器；

<input    id="shangchuanimg" title=""   type="file" name="file" value="" onChange="showImage(this)" />
<ul class="ul"> 上传之后的图片矩阵 </div>

压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可

function showImage(file, id) {if (file.files && file.files[0]) {for (let i = 0; i < file.files.length; i++) {console.log(file.files[i]) //拿到file对象let reader = new FileReader(); //读取filereader.readAsDataURL(file.files[i]);reader.onloadend = function(e) {let image = new Image() //新建一个img标签（还没嵌入DOM节点)image.src = e.target.result //将图片的路径设成file路径image.onload = function() { //压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可let canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = image.width / 10,    //压缩后图片的大小imageHeight = image.height / 10,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')console.log(dataURLtoFile(data,'a'+imgnum))//压缩完成 var newfile = dataURLtoFile(data,'a'+imgnum+'.png');var formFile = new FormData();formFile.append('files', newfile );//ajax()....ajax上传file}//上传之后预览小图$('.pz').before('<li class="fileimg isfile dis" num=' + first + '>' +'<img src=' + reader.result + ' alt="">' +'<span class="isclick"></span>' +'</li>')$('.ok').text('上传(' + imgnum + ')')}}}
}function dataURLtoFile(dataurl, filename) { // base64转file对象var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});}

input file 上传图片及压缩相关推荐

input file上传图片预览
下载地址http://download.csdn.net/detail/cometwo/9383602 兄弟文章:http://blog.csdn.net/libin_1/article/detail ...
JQuery input file 上传图片
表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".img ...
解决input file上传图片，部分手机拍照或者本地图片无法上传（图片太大，需要上传之前先压缩）
现在一般手机拍的照片都好几兆,图片文件太大会非常影响上传速度或者根本上传不上去,故上传图片前需要先进行压缩,这里使用的是lrz.js(lrz.js文件这里就不提供了) <input type=& ...
input file 上传图片判断图片的宽高尺寸
最近的项目中有需要限制上传图片的尺寸: <form id="uploadForm"><input type="file" id="f ...
vue input file 上传图片
原始图父组件: <div class="my-basic"><my-basic :items="category[3].menu[0]"@u ...
input file 上传图片时，文件格式限制
在input加入accept属性即可限制,上传的图片类型例如: <input type="file" name="" accept="imag ...
微擎php5.6无法上传图片,解决PHP5.6版本“No input file specified”的问题
问题描述:使用TP框架做项目时,在启用REWRITE的伪静态功能的时候,首页可以访问,但是访问其它页面的时候,就提示:"No input file specified." 原因在于 ...
js/jq input file获取本地文件路径将要上传图片显示到页面
<div class="ge_pic_icon_Infor"><img src="images/moren.jpg"/> </di ...
php 手机网站上传文件,HTML5的 input:file上传类型控制，html5手机上传图片调用API。...
调用摄像.视频调用语音调用相机调用相机图片或者相册一.input:file属性属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用 ...

input file 上传图片及压缩

input file 上传图片及压缩

input file 上传图片及压缩相关推荐

最新文章

热门文章