spring mvc+localResizeIMG implémente la compression et le téléchargement d'images H5

Cette fois, je vais vous proposer spring mvc+localResizeIMG pour réaliser la compression et le téléchargement d'images côté H5. spring mvc+localResizeIMG pour réaliser la compression et le téléchargement d'images côté H5. Quelles sont les précautions. les cas pratiques. Jetons un coup d'oeil une fois.

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 mobiles, car les photos prises par les téléphones mobiles font généralement plusieurs Mo. la vitesse de téléchargement est très rapide.

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.

Première étape : 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 dans le répertoire dans Dans le projet, le mien est placé dans le répertoire js.

Ensuite, importez 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 l'événement onchange à la zone de fichier de votre entrée téléchargée comme suit :

 <input  type="file"  id="payfile" name="myfile" style="display:none;" onchange="fileChange(this)" />

Implémentez la compression de code dans la méthode fileChange et transmettez de manière asynchrone la base64 compressée 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 + "]";  
    }  
  
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de la requête de pagination

Comment développer un mur WeChat avec Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!