Use Spring MVC+LOCALRESIZEIMG to implement the functions of the HTML5 picture compression uploading

Recently, I am making a mobile HTML5 application. I used the upload function. At first, I used the traditional upload method to upload mobile phones to take photos. Because the photos taken by mobile phones are generally several MBs, the upload speed is very slow.

I found the LocalResizeimg compression framework for a long time on the Internet. It feels very practical, so I will share it with you here.

LocalResizeimg is placed in github, the address is: https://github.com/think2011/LocalResizeimg.

Declaze LocalResizeimg to compress it, copy the distal folder in the directory to the project, and I put it in the JS directory.

Then import jQuery and LocalResizeimg JS in their own JS. like:

 <span style = white-point: pre> </span> <script src = <c: url value =/js/jquery/jquery-1.10.0.min.js/>> </scan style = white -Space: Pre> </span> <script type = text/javascript src = <c: url value =/js/lrz/distal/lrz.bundle.js/>> </script>

 <input type = file ID = payfile name = myfile style = display: none; onChange = filechange (this) />

Implement the compression of the code in the FileChange method and the asynchronous transmission of the Base64 generated after compressed to the background

 Function filechange (that) {var filepath = $ (that). Val (); if (filepath ==) {Return;} var extStart = filepath.lastindexof (.); (EXTSTART, FilePath.length ) .toupercase (); if (.jpg | .png | .bmp | .jpeg.touppercase (). Indexof (ext.touppercase ()) ==-1) {Alert (only allowed JPG, PNG, BMP, JPEG Format picture); Return false;} // Use the picture width to be 800 to compress lrz (that.files [0], {width: 800}) .Thenction (function (rst) {// Upload $ .ajax asynchronous after compression $ .ajax ({url: <%= request.getContextPath ()%>/Common/FileuploadPiction, Type: Post, Data: {IMGDATA: RST.BASE64 // Compressed base value}, Datatype: JSON, CACHE: FALS e, async: FALSE, Success: Function (data) {if (data.success) {alert (data.Message); ////data.message is the file path of the successful upload} else {alert (data.Message)); ///data .message is the cause of upload failure}}, error: function () {alert (upload failed);});});};}

 Import Sun.Misc.Base64DECODER; // Intrastable Base64 class/*** file Upload*/@Responsebody @RequestMapping (Common/FileupPricTure) Public Object FileuploadPi CTURE (String Imgdata, httpservletRequest Request) {logger.info ([file upload (file upload (file upload FileuploadPiction)] [Params: Imgdata = + Imgdata +]); Base64DECODER Decoder = New Base64Decoder (); playd_files); string imgpath = basepath+/test.jpg; // new file object It is used to save pictures and save the current engineering root directory File ImageFile = New File (IMGPATH); // Create output stream FileoutPutstream OutputStream = New FileoutPutstream (ImageFile); // Come over in the middle Byte [] result = decoder.decodebuffer (imgdata.split (,) [1]); // Decoding for (int i = 0; I <result.length; ++ i) {if (result [i] <0 ) {// Adjust the abnormal data result [i] += 256;}} outputStream.write (result); Return New Result (true, imgpath);} Catch (Appexception E1) {logger.error ([file Upload (Fileupload) -fastdfs] [Error: + E1 +]); Return New Result (False, File upload failed);} Catch (Exception E) {logler.error ([Fileupload)] [error: + e +]); Return New Result (False, file upload failed);} Finally {outputStream.flush (); outputStream.close ();}}

Result class:

 Import Java.io.serializable; Public Class Result Implements Serializable {Private Static Final Long ServerVersionuid = 1L; Private Boolean Success; E 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) {Thi s.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 +];}}

The above is all steps. I hope everyone will make a lot of comments and I hope that everyone will support VEVB Wulin.com.