HTML5 Mobile Upload

HTML5 Mobile Upload

HTML5 mobile Image Upload

The FileReader object of HTML5 is used. The main idea is that the front-end uses FileReader to obtain the image, convert it to base64 encoding, and preview it. Then, the image is decoded and saved to the disk on the server.

Core code:

 

$ ('Input [type = file] '). change (function () {/* File Upload loadding */upload ('upload_loading'upload.css ('display', 'block'); var upload ('top', vtop ); /* define the object variable */var liObj = $ (this ). parent ('A '). parent ('lil'); var aObj = $ (this ). parent ('a. cert-btn-blue-add'); var liidx = liObj. index (); var fileval = $ (this ). val (); var oFile = this. files [0];/* file format validation */var fileval = $ (this ). val (); var suffix = fileval. subst Ring (fileval. lastIndexOf ('.') + 1, fileval. length); if (suffix! = 'Jpg '& suffix! = 'Png '& suffix! Values ('display', 'None'); return false;}/* file size verification limit */if (oFile. size> 1024*512*1 hour ('display', 'None'); return false;}/* image preview and upload */setTimeout (function () {var oReader = new FileReader (); oReader. onload = function (e) {var sB Ase64 = e.tar get. result; if (window. gIsAndroid & sBase64.indexOf (data: image /)! = 0) {var sMime = sName. split (.). pop (). toLowerCase (); sBase64 = sBase64.replace (base64, image/+ sMime +; base64,) ;}var src = sBase64; var img = new Image (); img. onload = function () {liObj. append (img); liObj. find ('a. cert-arrow-del '). show () ;}; img. src = typeof src = 'string '? Src: URL. createObjectURL (src);/* re-assign the image value after compression * // var obj = compress (img, 70); // img. src = obj. newImageData; aObj. hide (); hasimgArr [liidx-1] = true; sBase64 = nullw.e.tar get. result = null;/* upload to server */$. ajax ({type: POST, timeout: 20000, url: upfilehtml. do, data: {filebase64: src, size: src. length}, dataType: json, success: function (data) {if (data. flag) {} else {alert ('upload failed, it is recommended to upload it on the PC official website '); liObj. find ('img '). remove (); liObj. find ('a. cert-arrow-del '). hide (); liObj. find ('a. cert-btn-blue-add input '). val (''); setTimeout (function () {aObj. show () ;}, 100) ;}{('{upload_loading'}.css ('display', 'None'); src = null ;}}) ;}; oReader. readAsDataURL (oFile) ;}, 500 );});

Compress the code (use canvas to draw a picture and convert toDataURL to image base64 encoding). The Code is as follows:

 

 

function compress(source_img_obj, quality, output_format) {    var mime_type = image/jpeg;    if(output_format!=undefined && output_format==png){      mime_type = image/png;    }    var cvs = document.createElement('canvas');    cvs.width = source_img_obj.width;    cvs.height = source_img_obj.height;    var ctx = cvs.getContext(2d).drawImage(source_img_obj, 0, 0);    var newImageData = cvs.toDataURL(mime_type, quality/100);    return {      newImageData: newImageData    };}

Problems:

 

1. Compatibility. The mobile phone memory is not enough to respond when the picture is too large. The page will be refreshed. This problem occurs on my mobile phone (4 GB for Huawei honor 3C mobile), which is at least 2592*1456 by default. However, chrome and UC browsers do not have this problem. By default, the UC mobile phone camera is 800*600. Therefore, the image size limit and prompt are added.

2. compression problems. After compression, it can be displayed normally after simulation on the PC without any problems, but not on the mobile phone. Chrome and UC browsers do not have this problem.

 

This problem also exists with the upload local preview plug-in written by a great god. Currently, no perfect method is found to be compatible with all mobile browsers.

 

 

The source code is attached:

FileReader Demo

Plug-In Demo