JQuery mobile Image Upload Component and jquery Image Upload Component

JQuery mobile Image Upload Component and jquery Image Upload Component

This article provides an example of the mobile Image Upload Component for your reference. The details are as follows:

Imageupload
Use File API + canvas client to compress images and upload files to the server

File dependency JQUERY

Parameter API

Loading: '. loading'. The loading icon selector is displayed on the page.
Url: '', the api address for receiving data
MaxFileSize: 1010241024, the maximum size of a single file supported by the server
Format:/^ image/I, supported file format. images text .....
IsCompress: true. If it is an image, you can enable client compression to reduce transmitted data files.
CompressNum: 0.6, image compression rate, 0 ~ 1. If it is set to 1, the final result may be greater than that not compressed. Please use it with caution. 1.
BeforeUpload: function () {}, for processing before uploading, false is returned to prevent file upload.
UploadStart: function () {}, start upload callback
AfterUpload: function () {}, callback of the end of the upload
UploadProgress: function (v) {} upload progress bar
UploadError: function () {} upload error callback
ShowThumbnail: function () {} display thumbnail

Example:

<Div id = "proccess"> </div> before compression: <div id = "rrr1"> </div> <br> <input type = "file" multiple id = "filesss"> <br> after compression: <div id = "rrr2"> </div> <br>

$ ('# Filess '). mobileUpload ({url: '', beforeUpload: function () {console. log ('beforeupload')}, uploadStart: function (file) {console. log ('uploadstart') console. log ('size of the original file: '+ file. length) ;}, uploadProgress: function (v) {console. log ('Progress '+ v)}, uploadError: function () {console. log ('uploaderror')}, showThumbnail: function (file) {$ ('# rrr1 '). append ('') ;}, afterUpload: function (file, data) {console. log ('compressed size: '+ file. length); $ ('# rrr2 '). append (' ');}});

The above is the mobile Image Upload component, which is very practical and I hope you will like it.