显示效果如下，点击上传，选择任意图片，压缩到设定的图片大小并显示，压缩后发送给后台。
HTML：
<th align="center" rowspan="4"><span style="color:red">*</span>照片：<br><input type="file" value="上传" id="selectphoto" style="display:none"><button type="button" class="btn btn-default" onClick="uploadphoto()" style="background-color: #f5f7f8;padding: 2px 4px;margin-right: 9px;">上传</button> </th><td align="center" rowspan="4"><div id="photo"><img id="viewImg"/> </div></td>
JS：
给上传按钮添加事件，激活被隐藏的file类型input控件，选择照片。
//上传照片function uploadphoto(){var fileDialog = $("#selectphoto");fileDialog.change(function(event){var filePath = $(this).val(), //获取到input的value，里面是文件的路径 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(), imgBase64 = '',//存储图片的imgBase64 fileObj = document.getElementById("selectphoto").files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象 photoname = fileObj.name;//可以获取文件名称// 检查是否是图片 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { alert('上传错误,文件格式必须为：png/jpg/jpeg'); return; } // 调用函数，对图片进行压缩 compress(fileObj,function(imgBase64){ imgBase64 = imgBase64; //存储转换的base64编码 globalphoto = imgBase64; //可用于随其它信息一同ajax发送后台$("#viewImg").attr('src',imgBase64); //显示预览图片 }); })fileDialog.click();}
压缩函数用于对图片进行压缩，根据实际布局情况设定画布宽、高之后，不管上传图片大小比例如何，都会按照设置值进行拉伸压缩，会出现图片拉伸或者剪裁的情况：
// 不对图片进行压缩，直接转成base64 function directTurnIntoBase64(fileObj,callback){ var r = new FileReader(); // 转成base64 r.onload = function(){ //变成字符串 imgBase64 = r.result; console.log(imgBase64); callback(imgBase64); } r.readAsDataURL(fileObj); //转成Base64格式 } // 对图片进行压缩 function compress(fileObj, callback) { if ( typeof (FileReader) === 'undefined') { console.log("当前浏览器内核不支持base64图标压缩"); //调用上传方式不压缩 directTurnIntoBase64(fileObj,callback); } else { try { var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>'); image.load(function(){ width = 150, //定义画布的大小，也就是图片压缩之后的像素，可根据实际布局设定大小height = 180,canvas = document.createElement('canvas'), context = canvas.getContext('2d'), imageWidth = 0, //压缩图片的大小 imageHeight = 0, offsetX = 0, offsetY = 0, data = ''; canvas.width = width; canvas.height = height; context.clearRect(0, 0, width, height); if (this.width > this.height) { imageWidth = Math.round(width * this.width / this.height); imageHeight = height; offsetX = - Math.round((imageWidth - width) / 2); } else { imageHeight = Math.round(height * this.height / this.width); imageWidth = width; offsetY = - Math.round((imageHeight - height) / 2); } context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight); var data = canvas.toDataURL('image/jpeg'); //压缩完成执行回调 callback(data); }); image.attr('src', e.target.result); }; reader.readAsDataURL(fileObj); }catch(e){ console.log("压缩失败!"); //调用直接上传方式 不压缩 directTurnIntoBase64(fileObj,callback); } } }
