本文主要是介绍js图片上传 压缩图片大小，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
此demo为大于1M对图片进行压缩上传
若小于1M则原图上传，可以根据自己实际需求更改。
demo源码如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>XMLHttpRequest上传文件</title><script type="text/javascript">/*三个参数file：一个是文件(类型是图片格式)，w：一个是文件压缩的后宽度，宽度越小，字节越小objDiv：一个是容器或者回调函数photoCompress()*/function photoCompress(file,w,objDiv){var ready=new FileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/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//生成canvasvar 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);}}/*** 将以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});}var xhr;//上传文件方法function UpladFile() {var fileObj = document.getElementById("file").files[0]; // js 获取文件对象var url = "后台图片上传接口"; // 接收上传文件的后台地址 var form = new FormData(); // FormData 对象if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传photoCompress(fileObj, {quality: 0.2}, function(base64Codes){//console.log("压缩后：" + base.length / 1024 + " " + base);var bl = convertBase64UrlToBlob(base64Codes);form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象xhr = new XMLHttpRequest(); // XMLHttpRequest 对象xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror = uploadFailed; //请求失败xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime(); //设置上传开始时间oloaded = 0;//设置上传开始时，以上传的文件大小为0};xhr.send(form); //开始上传，发送form数据});}else{ //小于等于1M 原图上传form.append("file", fileObj); // 文件对象xhr = new XMLHttpRequest(); // XMLHttpRequest 对象xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror = uploadFailed; //请求失败xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime(); //设置上传开始时间oloaded = 0;//设置上传开始时，以上传的文件大小为0};xhr.send(form); //开始上传，发送form数据}}//上传成功响应function uploadComplete(evt) {//服务断接收完文件返回的结果var data = JSON.parse(evt.target.responseText);if(data.success) {alert("上传成功！");}else{alert("上传失败！");}}//上传失败function uploadFailed(evt) {alert("上传失败！");}//取消上传function cancleUploadFile(){xhr.abort();}//上传进度实现方法，上传过程中会频繁调用该方法function progressFunction(evt) {var progressBar = document.getElementById("progressBar");var percentageDiv = document.getElementById("percentage");// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0if (evt.lengthComputable) {//progressBar.max = evt.total;progressBar.value = evt.loaded;percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";}var time = document.getElementById("time");var nt = new Date().getTime();//获取当前时间var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为sot = new Date().getTime(); //重新赋值时间，用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位boloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算//上传速度计算var speed = perload/pertime;//单位b/svar bspeed = speed;var units = 'b/s';//单位名称if(speed/1024>1){speed = speed/1024;units = 'k/s';}if(speed/1024>1){speed = speed/1024;units = 'M/s';}speed = speed.toFixed(1);//剩余时间var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';if(bspeed==0) time.innerHTML = '上传已取消';}</script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>这篇关于js图片上传 压缩图片大小的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
