<form action="upload.php" method="post" id="formss" enctype="multipart/form-data"> <p><input id="file" type="file" name="imgs[]" multiple accept="image/gif, image/png, image/jpg, image/jpeg"></p> <input type="submit" value="提交" /> </form>
结合之前说过的formdata对象,使用canvas获取原图重新绘制,后转换为base64格式图像,使用formdata传送至后台
imgMInity("formss", "file");//第一参数为formid 第二参数为input[file]类型控件id function imgMInity(formid, inputid) { //创建formdata对象; var formss = document.getElementById(formid); var imgform = new FormData(formss); var eleFile = document.getElementById(inputid); if(window.FormData) { // 压缩图片需要的一些元素和对象 eleFile.addEventListener('change', function(event) { for(var i = 0; i < event.target.files.length; i++) { file = event.target.files[i]; if(file.type.indexOf("image") == 0) { console.log('已选择图片' + file.name + ',大小为' + Math.round(1000 * file.size / (1024 * 1024)) / 1000 + 'M。'); var reader = new FileReader(),img = new Image(); reader.readAsDataURL(file); reader.onload = function(e) { img.src = e.target.result; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // base64地址图片加载完毕后 img.onload = function() { console.log("imgonload"); // 图片原始尺寸 var originWidth = this.width; var originHeight = this.height;
console.log('图片原尺寸是:' + [originWidth, originHeight].join('x'));// 设置压缩比例或者固定宽高var maxWidth = this.width * 0.8,maxHeight = this.height * 0.8;// 目标尺寸var targetWidth = originWidth,targetHeight = originHeight;if(originWidth > maxWidth || originHeight > maxHeight) {// 图片尺寸超过400x400的限制if(originWidth / originHeight > maxWidth / maxHeight) {// 更宽,按照宽度限定尺寸targetWidth = maxWidth;targetHeight = Math.round(maxWidth * (originHeight / originWidth));} else {targetHeight = maxHeight;targetWidth = Math.round(maxHeight * (originWidth / originHeight));}//alert('超过限制,图片大小限制为' + [targetWidth, targetHeight].join('x'));}canvas.width = targetWidth;canvas.height = targetHeight;// 清除画布context.clearRect(0, 0, targetWidth, targetHeight);// 图片压缩context.drawImage(img, 0, 0, targetWidth, targetHeight);var base64_img = canvas.toDataURL(file.type || 'image/png');imgform.append("img" + i + "", file);//将绘制好的图片添加到formdata中};}} else {alert("您的浏览器不支持压缩上传功能,请使用极速模式或非IE浏览器。");//若浏览器不支持FormData,则无法使用该方法发送图片}}});}} 君凯商联网 Alex.Ma