Utilisation de Spring mvc localResizeIMG pour implémenter le téléchargement de compression d'image HTML5

Récemment, je travaillais sur une application mobile HTML5 et j'utilisais la fonction de téléchargement. Au début, j'utilisais la méthode de téléchargement traditionnelle pour télécharger des photos prises par des téléphones portables, car les photos prises par des téléphones portables font généralement plusieurs Mo,
.

La vitesse de téléchargement est donc très lente.

J'ai trouvé le framework de compression localResizeIMG après une longue recherche en ligne. Je pense que c'est très pratique, alors je le partage avec vous ici.

Étape 1 : Téléchargez localResizeIMG

localResizeIMG est placé dans github, l'adresse est : https://github.com/think2011/localResizeIMG.

Étape 2 : Importez les js liés à localResizeIMG dans le projet Web
Décompressez la compression localResizeIMG et copiez le dossier dist du répertoire dans le projet. Le mien est placé dans le répertoire js.
Importez ensuite les js de jQuery et localResizeIMG dans votre propre js. Par exemple :

<span style="white-space:pre">    </span><script src="<c:url value="/js/JQuery/jquery-1.10.0.min.js"/>"></script>  
<span style="white-space:pre">    </span><script type="text/javascript" src="<c:url value="/js/lrz/dist/lrz.bundle.js"/>"></script>

Étape 3 : Ajoutez le code suivant à l'événement onchange dans la zone de fichier de votre entrée téléchargée
4984d44f48d5bc944cd35313c5991cc4
Dans la méthode fileChange, implémentez la compression de code et transmettez de manière asynchrone le base64 compressé en arrière-plan

function fileChange(that){
		var filepath=$(that).val();
		if(filepath=="")
		{
			return;
		}
		var extStart=filepath.lastIndexOf(".");
		var ext=filepath.substring(extStart,filepath.length).toUpperCase();
		if(".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(ext.toUpperCase())==-1){
		   alert("只允许上传jpg、png、bmp、jpeg格式的图片");
			return false;
		}
     //以图片宽度为800进行压缩
	lrz(that.files[0], {
	     width: 800
	   })
	.then(function (rst) {
			//压缩后异步上传
	  		$.ajax({
			url : "<%=request.getContextPath()%>/common/fileUploadPicture",
			type: "POST",
			data : {
				imgdata:rst.base64//压缩后的base值
			},
			dataType:"json",
			cache:false,
			async:false,
			success : function(data) {
			if(data.success)
				{
					alert(data.message);///data.message为上传成功后的文件路径
				}else{
					alert(data.message);///data.message为上传失败原因
				}
							
						},
		error : function(){
				alert("上传失败");
						}
					});
	     });
}

Étape 4 : Le contrôleur Spring MVC reçoit la valeur de base en arrière-plan, analyse et enregistre le fichier

import sun.misc.BASE64Decoder;//导入的base64的类  
/** 
     * 文件上传 
     */  
    @ResponseBody  
    @RequestMapping("common/fileUploadPicture")  
    public Object fileUploadPicture(String imgdata, HttpServletRequest request) {  
        LOGGER.info("[文件上传（fileUploadPicture）][params:imgdata=" + imgdata + "]");  
         BASE64Decoder decoder = new BASE64Decoder();  
        try {  
            String basePath = request.getRealPath("/upload_files");  
            string imgPath=basePath+"/test.jpg";  
            // new一个文件对象用来保存图片，默认保存当前工程根目录  
            File imageFile = new File(imgPath);  
            // 创建输出流  
            FileOutputStream outputStream = new FileOutputStream(imageFile);  
            // 获得一个图片文件流，我这里是从flex中传过来的  
            byte[] result = decoder.decodeBuffer(imgdata.split(",")[1]);//解码  
            for (int i = 0; i < result.length; ++i) {  
                if (result[i] < 0) {// 调整异常数据  
                result[i] += 256;  
            }  
        }  
            outputStream.write(result);  
  
            return new Result(true, imgPath);  
        } catch (AppException e1) {  
            LOGGER.error("[文件上传（fileUpload）-fastdfs][errors:" + e1 + "]");  
            return new Result(false, "文件上传失败");  
        } catch (Exception e) {  
            LOGGER.error("[文件上传（fileUpload）][errors:" + e + "]");  
            return new Result(false, "文件上传失败");  
        }finally{  
        outputStream.flush();   
        outputStream.close();  
          
        }  
    }

Classe de résultat :

import java.io.Serializable;  
  
public class Result implements Serializable{  
    private static final long serialVersionUID = 1L;  
    private boolean success;  
    private String message;  
  
    public Result() {  
        success = true;  
    }  
  
    public Result(boolean success, String message) {  
        this.success = success;  
        this.message = message;  
    }  
  
    public boolean isSuccess() {  
        return success;  
    }  
  
    public void setSuccess(boolean success) {  
        this.success = success;  
    }  
  
    public String getMessage() {  
        return message;  
    }  
  
    public void setMessage(String message) {  
        this.message = message;  
    }  
  
    @Override  
    public String toString() {  
        return "Result [success=" + success + ", message=" + message + "]";  
    }  
  
}

Ce qui précède explique comment utiliser Spring MVC localResizeIMG pour réaliser la compression d'images HTML5 et télécharger du contenu, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !