亲测
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js上传图片</title> <script src="/exif.js"></script> </head> <body> <input id="file" type="file"> <script type="text/javascript"> var fileTypes = ['image/jpeg', 'image/gif', 'image/png']; window.onload = function myfunction() { var input = document.getElementById('file'); input.onchange = function () { var files = this.files; for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; if (!fileTypes.includes(file.type)) { alert("只可上传图片") return false; } if (file.size / 1024 > 1025) { photoCompress(file, { quality: 0.3 }, upload_html5); } else { upload_html5(file); } } }; } function upload_html5(file) { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function (e) { }, false); xhr.addEventListener("load", function (e) { var obj = JSON.parse(e.target.responseText); if (obj.code == 200) { alert("上传成功"); } else { alert(obj.message); } }, false); xhr.addEventListener("error", function (e) { console.log(e); alert("上传失败"); }, false); xhr.addEventListener("abort", function (e) { alert("上传取消"); }, false); var fd = new FormData; fd.append("file", file); fd.append("hallName", '分会场1'); fd.append("dateTime", '2019-06-21'); xhr.open("post", "/Common/UploadFile"); xhr.send(fd); } /* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度，宽度越小，字节越小 objDiv：一个是容器或者回调函数 photoCompress() */ function photoCompress(file, obj, objDiv) { var Orientation = null;//ios选择上传图片是图片角度问题 EXIF.getData(file, function () { EXIF.getAllTags(this); Orientation = EXIF.getTag(this, 'Orientation'); }); var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE, * 如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload = function () { canvasDataURL(this.result, obj, Orientation, objDiv) } } function canvasDataURL(path, obj, Orientation, 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); if (Orientation != "" && Orientation != 1 && Orientation != undefined) { switch (Orientation) { case 6://需要顺时针90度旋转 canvas.width = h; canvas.height = w; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -h); break; case 8://需要逆时针90度旋转 canvas.width = h; canvas.height = w; ctx.rotate(-90 * Math.PI / 180); ctx.drawImage(this, -w, 0); break; case 3://需要180度旋转 ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h); break; } } else { 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); } } /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url方式表示的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 }); } </script> </body> </html>