jQuery Mobile Picture Upload Component

The example in this paper shares the mobile picture upload components for your reference, which are as follows

Imageupload
Compress pictures using File API+canvas client and implement file upload server

File Dependency JQUERY

Parameter API

loading:'.loading', page shows the loading icon selector
url:'', api interface address to receive data
maxFileSize:1010241024, maximum single file size supported by the server
format:/^image/i, supported file format. images text.....
isCompress: true, if it is a picture, can turn on client compression, reduce data files transferred
compressNum:0.6, Picture compression ratio, 0~1 set to 1 may end up larger than uncompressed, use 1 carefully.
beforeUpload:function(){}, pre-upload processing, returning false can prevent file upload
uploadStart: function(){}, Callback to start uploading
afterUpload: function(){}, callback at end of upload
uploadProgress: Progress bar for function (v) {} upload
uploadError: Callback for function (){} upload error
showThumbnail:function(){} Show Thumbnails

Example use:

<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>

$('#filesss').mobileUpload({
  url: '',
  beforeUpload: function () {
   console.log('beforeUpload')
  },
  uploadStart: function (file) {
   console.log('uploadStart')
   console.log(' Original file size: ' + file.length);
  },
  uploadProgress: function (v) {console.log(' Speed of progress ' + v)},
  uploadError: function () {console.log('uploadError')},
  showThumbnail: function (file) {

   $('#rrr1').append('<img src="' + file + '">');
  },
  afterUpload: function (file, data) {
   console.log(' Compressed size: ' + file.length);
   $('#rrr2').append('<img src="' + file + '">');
  }
 });

For more exciting content, click on "jQuery Upload Operation Summary" for in-depth study and research.

These are the mobile picture upload components, very useful upload components, I hope you like them.