Heim > Web-Frontend > H5-Tutorial > spring mvc+localResizeIMG implementiert die H5-Bildkomprimierung und das Hochladen

spring mvc+localResizeIMG implementiert die H5-Bildkomprimierung und das Hochladen

php中世界最好的语言
Freigeben: 2018-03-26 13:17:18
Original
2633 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen Spring MVC+localResizeIMG, um die H5-seitige Bildkomprimierung und den Upload zu realisieren. Was sind die Vorsichtsmaßnahmen Werfen wir einen Blick auf die praktischen Fälle.

Kürzlich habe ich an einer mobilen HTML5-Anwendung gearbeitet und die Upload-Funktion verwendet. Zuerst habe ich die traditionelle Upload-Methode verwendet, um mit Mobiltelefonen aufgenommene Fotos hochzuladen. Die Upload-Geschwindigkeit ist sehr langsam.

Nach langer Suche im Internet habe ich das Komprimierungsframework localResizeIMG gefunden. Ich finde es sehr praktisch und teile es hier mit Ihnen.

Schritt eins: Laden Sie localResizeIMG herunter

localResizeIMG wird in Github platziert, die Adresse lautet: https:// Github .com/think2011/localResizeIMG.

Schritt 2: LocalResizeIMG-bezogene js in das Webprojekt importieren

Entpacken Sie die localResizeIMG-Komprimierung und kopieren Sie den dist-Ordner im Verzeichnis nach In Projekt, meins befindet sich im js-Verzeichnis.

Dann importieren Sie die js von jQuery und localResizeIMG in Ihre eigenen js. Beispiel:

<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>
Nach dem Login kopieren

Schritt 3: Fügen Sie das onchange-Ereignis wie folgt zum Dateifeld Ihrer hochgeladenen Eingabe hinzu:

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

Implementieren Sie die Codekomprimierung in der fileChange-Methode und übertragen Sie das komprimierte Base64 asynchron in den Hintergrund

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("上传失败");  
                        }  
                    });  
         });  
}
Nach dem Login kopieren

Schritt 4: Der Spring-MVC-Controller empfängt den Basiswert im Hintergrund und analysiert und speichert die Datei

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();  
          
        }  
    }
Nach dem Login kopieren

Ergebnisklasse:

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 + "]";  
    }  
  
}
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Paging-Abfragen

Wie man eine WeChat-Wall mit Node.js entwickelt

Das obige ist der detaillierte Inhalt vonspring mvc+localResizeIMG implementiert die H5-Bildkomprimierung und das Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage