Pure native js mobile terminal Image Compression upload plug-in, js Image Compression plug-in

Pure native js mobile terminal Image Compression upload plug-in, js Image Compression plug-in

Some time ago, my colleague asked another question, saying that the mobile phone side could not take photos for several MB of high-definition images. The uploading server was too slow. Could you ask me if I had a js plug-in that could compress images and upload them, of course there is no such thing on hand. Don't worry. I will search for it online.

What is the result... Eh ~ All of them are based on jquery and zepto (this sentence seems to have been too many times...), and then I will not speak out,

Then, of course, I did it myself. First:

Mobile compression and upload plug-ins of pure native js do not rely on any library

Usage

Add the input tag to the html page and use custom attributes.data-LUploaderThe tag id triggered by click binding. The syntax is as follows:

<Div class = "LUploader" id = "demo1"> <div class = "LUploader-container"> <input data-LUploader = 'demo1' data-form-file = 'basestr 'Data-upload-type = 'front' type = "file"/> <ul class = "LUploader-list"> </ul> </div> <div> class = "icon-camera font20"> </div> <p> Click Upload </p> </div>

 

By adding a custom property suchdata-form-fileAssignmentbasestrTo determine the name of the base64 string parameter to be uploaded, and assign values to other custom attributes to determine the key values of other post parameters, as shown indata-upload-type='front'In this way, the post parameter will look like this:

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

 

Introduce the style file to the page:

 <link rel="stylesheet" href="css/LUploader.css">

 

Introduce js files to the page at the same time:

<script src="js/LUploader.js"></script>

Initialize the plug-in:

New LUploader (here, the input object to be bound is used as the parameter, {url: '', // post request address multiple: false, // whether to upload multiple files at a time; default value: false maxsize: 102400, // The maximum file size for ignoring the compression operation is 100kb by default. accept: 'image/* ', // you can upload the following image type showsize: false // whether the original file size is displayed; default value: false });

Project address: https://github.com/xfhxbb/LUploader

Lele is better than zlele. If you don't have a good mobile phone to upload an image plug-in, you can take this with me first!