We recommend three good image compression upload plug-ins (webuploader, localResizeIMG4, and LUploader ),

We recommend three good image compression upload plug-ins (webuploader, localResizeIMG4, and LUploader ),

There are many plug-ins involved in the interaction of web images and the compression and uploading of images. I believe they have been used by everyone. Here I will recommend three plug-ins. As for the benefits, I am benevolent:

1. The most famous WebUploaderDeveloped by the Baidu FEX team, primarily H5, supplemented by FLASH, and compatible with IE6 +, iOS 6 +, and android 4 +. It uses large file parts for concurrent uploads, the file upload efficiency is greatly improved. After reading the official documentation, you will know that all the functions you need can be fulfilled. The disadvantage is that the plug-in size is too large, the built-in Style File also depends on the jquery class library. For more information, see the following demo:

<! Doctype html> 
2. if the mobile plug-in can break away from jquery and meet the basic needs of the project, it would be better. Here, localResizeIMG is doing well, and it has four historical versions, we recommend that you introduce the latest stable version localResizeIMG4. The demo is as follows (you must write the style yourself ):
<! Doctype html> 
3. the advantages and disadvantages of the above two models are clear at a glance. Our company uses LUploader, written in pure native js, and does not rely on any class libraries. After compression, the js file is only 5 kb, and only three steps are required for Image Compression and uploading:
(1) introduce the input tag in the html page and bind the tag id triggered by clicking the custom attribute data-LUploader:
<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"> </div> <p> Click Upload </p> </div>
(2) Introduce style files and js files to the page:
<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" ><script src="js/LUploader.js"></script>
(3) initialize the plug-in the js script:
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 size of the file to which the compression operation is ignored is 100kb by default. accept: 'image/jpg, image/jpeg, image/png ', // if the image is written as image/*, the response will be slow. quality: 0.1. // The default compression ratio is 0.1. The smaller the value is, the larger the compression ratio is. showsize: false // whether the original file size is displayed; default value: false });
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.