Pure native JS mobile image compression upload plug-in

Some time ago, colleagues again to consult a question, said mobile phone end motionless photo on several m HD large picture, upload server too slow, ask if I can compress the picture and upload JS plugin, of course, not on hand, do not panic, I go online search.

The result, hehe ... EH ~ and all is based on jquery, Zepto (this sentence seems to be too many times to vomit ...) ), and then I will not spit out the groove,

Then of course it was done by myself, first:

Pure native JS mobile image compression Upload plugin, do not rely on any library

Usage

The input tag is introduced into the HTML page, and the data-LUploader tag ID that is triggered by the custom attribute binding point is as follows:

<Divclass= "Luploader"ID= "Demo1">        <Divclass= "Luploader-container">            <inputData-luploader= ' Demo1 'Data-form-file= ' Basestr 'Data-upload-type= ' Front 'type= "File" />            <ulclass= "Luploader-list"></ul>        </Div>        <Div>            <Divclass= "icon Icon-camera font20"></Div>            <P>Click Upload</P>        </Div>    </Div>

By assigning a custom property such as an data-form-file assignment basestr to the upload base64 string parameter name and other custom attribute assignments to determine the other post parameter key values, as a result data-upload-type=‘front‘ , the post parameter will look like this:

{  formFile:data:image/jpeg;base64,/9j/4 ...,  Uploadtype:front}

To introduce a style file to the page:

<rel= "stylesheet"  href= "Css/luploader.css">

Also introduce the JS file to the page:

<src= "Js/luploader.js"></script> 

Initialize the plugin:

New Luploader (This puts the input object that needs to be bound as            a parameter, {",///POST request address            false,// if uploading multiple files at once defaults to False            maxsize:102400,// Ignore compression operation file volume limit default 100kb            accept: ' image/* ',// upload Image type             showsize:false// whether the original file size is displayed by default false        });

Project Address: Https://github.com/xfhxbb/LUploader

Alone Lele is not as many Lele, if the partners do not have good mobile phone-side upload picture plug-in than the first to take me this to deal with it!

Pure native JS mobile image compression upload plug-in