//html <ul class="ul-upload"> <li></li> <li></li> </ul> <form id="uploadForm" method="post" enctype="multipart/form-data"> <input type="file" id="uploadFile" name="uploadFile"> </form> //js $(".ul-upload li").click(function() { $("#uploadFile").click(); }); $("#uploadFile").change(function() { var val = $(this).val(); if (val != null && val != '') { var temp = val.substring(val.indexOf(".") + 1); if (temp == 'png' || temp == 'jpg') { var fileObj = document.getElementById("uploadFile").files[0]; // js var form = new FormData(); // FormData 对象 imgCallBack(fileObj,form) } else { alert("请选择后缀为png、jpg的图片上传!") } } }); function imgCallBack(fileObj,form) { if (fileObj.size / 1024 > 1025) { // 大于1M,进行压缩上传 photoCompress(fileObj, { quality : 0.2 }, function(base64Codes) { var bl = convertBase64UrlToBlob(base64Codes); form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象 $.ajax({ url :'', type : 'POST', data : form, async : false, cache : false, contentType : false, processData : false, success : function(data) { } }); }); } else { form.append("file", fileObj); // 文件对象 $.ajax({ url :'', type : 'POST', data : form, async : false, cache : false, contentType : false, processData : false, success : function(data) { } }); } } function photoCompress(file, w, objDiv) { var ready = new FileReader(); ready.readAsDataURL(file); ready.onload = function() { var re = this.result; canvasDataURL(re, w, objDiv) } } function canvasDataURL(path, obj, callback) { var img = new Image(); img.src = path; img.onload = function() { var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 默认图片质量为0.7 // 生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); } } function convertBase64UrlToBlob(urlData) { var arr = urlData.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 Blob([u8arr], { type : mime }); }