js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传

怼烎@ 2022-12-10 07:14 233阅读 0赞

# js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传 #

### 图片上传目录 ###

*  js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
 *   *  html代码
     *  js代码

## html代码 ##

<input type="file" name="file" class="file" id="uploadImg" multiple accept="image/jpg, image/jpeg, image/png" onchange="uploadFileChang()">

## js代码 ##

function uploadFileChang(){ 
    
    	// 获取文件
    	var file = $("#uploadImg")[0].files[0]
    	// 判断文件大小
    	if (file.size > 1024 * 1024 * 1){ 
    	  // 图片大于1M进行压缩
    	  canvasDataURL(file, function (blob) { 
    		var newFile = new File([blob], file.name, { 
    		  type: file.type
    		})
    		var isLt1M;
    		if (file.size < newFile.size) { 
    		  isLt1M = file.size
    		} else { 
    		  isLt1M = newFile.size
    		}
    		console.log(file.size)
    		console.log(newFile.size)
    		if (isLt1M / 1024 / 1024 > 1) { 
    		  return alert('图片压缩之后还是大于1M，请压缩之后上传！');
    		} else { 
    		  if (file.size < newFile.size) { 
    			return uploadImage(file)
    		  }
    		  uploadImage(newFile)
    		}
    	  })
    	} else { 
    	  // 图片小于1M直接上传
    		uploadImage(file);
    	}
    }
    
    
    
    // 图片压缩方法
    function canvasDataURL(file, callback) { 
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (e) { 
        const img = new Image()
        const quality = 0.1 // 图像质量
        const canvas = document.createElement('canvas')
        const drawer = canvas.getContext('2d')
        img.src = this.result
        img.onload = function () { 
          canvas.width = img.width
          canvas.height = img.height
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
          // convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
          convertBase64UrlToBlob(canvas.toDataURL("image/jpeg", quality), callback);
        }
      }
    }
    
    // 上传图片方法
    function uploadImage(file) { 
      var formData = new FormData();
      formData.append("file", file);
      $.ajax({ 
        type: 'POST',
        async: false,
        url: 'www......./api/upload/image',
        data: formData,
        contentType: false,
        processData: false, // 默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false
        success: function (res) { 
          if (res.Code == "0") { 
            // 上传成功处理
            $("#uploadImg").val("")
          } else { 
          	$("#uploadImg").val("")
            alert('上传失败，请重新上传！')
          }
        },
        error: function () { 
          $("#uploadImg").val("")
          alert('网络错误，请重试！')
        }
      });
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5图片压缩上传

1、图片上传过慢，图片进行压缩上传 ![1021765-20190706163117700-599513873.png][] <div class="form-it

偏执的太偏执、/ 2023年08月17日 15:47/ 0 赞/ 94 阅读

相关 js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传 html代码

怼烎@/ 2022年12月10日 07:14/ 0 赞/ 234 阅读

相关用户名片 1：图片上传与压缩

前言注册登录工作完成之后，就可以设置用户名片了，如昵称、头像、个人签名等信息。本篇带领大家实现用户名片的功能设计。知识准备 MultipartFile

悠悠/ 2022年12月09日 05:28/ 0 赞/ 95 阅读

相关上传图片前端js压缩

function uploadImg(_this) { var fileName = _this.value;//文件名 var exten

傷城~/ 2022年09月22日 03:49/ 0 赞/ 207 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 233 阅读

相关 html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

先上效果 ![1217818-20180807172609974-1127587361.png][] 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) ![121

￡神魔★判官ぃ/ 2022年05月15日 03:43/ 0 赞/ 273 阅读

相关 JS—图片压缩上传（单张）

\vue+webpack环境，这里的that指到vue实例 <input type="file" name="file" accept="image/" @chang

淩亂°似流年/ 2022年04月03日 03:48/ 0 赞/ 290 阅读

相关 localResizeIMG:图片压缩上传

vant-ui Uploader 图片上传组件 + localResizeIMG 实现图片压缩上传：一、npm安装： npm install lrz复制代码

客官°小女子只卖身不卖艺/ 2022年01月20日 04:59/ 0 赞/ 363 阅读

相关 JQ图片压缩上传

css { margin: 0; padding: 0; } li {

以你之姓@/ 2021年09月16日 11:54/ 0 赞/ 461 阅读

相关 flutter压缩图片上传

前言：在android原生中比较常用的是luban压缩，当然，flutter版本也有luban压缩，通过一些资料搜索，luban压缩是直接通过dart进行压缩的，

落日映苍穹つ/ 2021年09月03日 10:47/ 0 赞/ 824 阅读