Home > Developer > JavaScript
Use of the jQuery Plupload upload plug-in, jqueryplupload
First download plupload-> http://www.plupload.com
Because Plupload has many configurable parameters, the most common ones are described here, which are displayed on the jquery-ui interface! As follows:
By default, Plupload supports four upload Methods: html5, flash, silverlight, html4, and loading in order. If the browser does not support html5, it will select flash... to the end of html4,
If you do not need an upload method, do not write it in the configuration!
Directly Add code
<Body> <div id = "uploader"> <p> Your browser doesn' t have Flash, Silverlight or HTML5 support. </p> </div> <script type = "text/javascript"> $ (function () {$ ("# uploader "). plupload ({runtimes: 'html5, flash, silverlight, html4', // This can be left empty. plupload supports url: "UploadPhotoServlet" by default, // upload the background Request Path max_file_size: '1000mb', // The multi_selection: true, which is used to limit the size of a single file. // Multifile upload is supported by default. false does not support chunk_size: '0 ', // whether to split the uploaded file. 0 indicates that no resi exists. The ze configuration is used to compress the image to be uploaded. this parameter is an object and contains five attributes: width: Specifies the width of the compressed image, if this attribute is not set, the default value is the width height of the original image: Specify the height of the compressed image. If this attribute is not set, the default value is the height of the original image crop: whether to crop the image quality: the quality of the compressed image, which is only valid for jpg images. The default value is 90. Quality can be used together with width and height, but can also be used independently. When used separately, the width and height of the compressed image will not change, but the quality is reduced, therefore, the volume will also decrease. preserve_headers: whether to retain the image metadata after compression. true indicates that the image metadata is retained, and false indicates that the image metadata is not retained. The default value is true. The following example shows how to delete the image metadata to reduce the size of the image by a little: * // * resize: {width: 200, height: 200, quality: 90, crop: true}, * // * rename: true, * // enable renaming multiple queue files/* sortable: true, * // enable the File Sorting function in the queue, change the upload priority/* dragdrop: true, * // enable drag/drop upload. The default value is true/*. The thumbnail is displayed on the right and the thumbnail is displayed on the list by default. */views: {list: true, thumbs: true, // Show thumbs active: 'thumbs '},/* files required for flash and xap upload */flash_swf_url: 'plupload/js/Moxie.swf ', silverlight_xap_url: 'plupload/js/Moxie. xap '}) ;}) </script> </body>
There is such a sentence in the official document
That is to say, the UI. Plupload requires jquery-ui support, the http://jqueryui.com/download/ selects the appropriate topic, I choose this
The complete import file is
FAQs:
1. If you find that clicking the select file button is very slow in the pop-up file box, remove the filtered file code! Set it as needed
Filters: {mime_types: [// only images and zip files can be uploaded {title: "Image files", extensions: "jpg, gif, png"}, {title: "Zip files", extensions: "zip"}], max_file_size: '400kb', // only files with a maximum size of KB can be uploaded. prevent_duplicates: true // repeated files cannot be selected}You can use this parameter to restrict the type and size of the uploaded file. This parameter is passed in as an object. It has three attributes: mime_types: used to limit the type of the uploaded file, an array. Each element of the array is an object. The object has two attributes: title and extensions. title indicates the name of the filter, and extensions indicates the file extension, separate multiple values with commas. This attribute is an empty array by default, that is, there is no limit.
Max_file_size: used to limit the size of the uploaded file. If the file size exceeds this value, it cannot be selected. The value can be a number in the unit of B or a string consisting of numbers and units, for example, '200kb'
Prevent_duplicates: whether to allow repeated files to be selected. If it is set to true, this parameter is not allowed. If it is set to false, this parameter is allowed. The default value is false. If the two files have the same file name and size, they will be considered as duplicate files.
2. If the background uses a file domain name to receive the file, and additional parameters are attached
Two additional parameters are required.
File_data_name: "uploadFile", // specifies the name of the file field during file upload. The default value is file, for example, in php, you can use $ _ FILES ['file'] to obtain the information of the uploaded file/* resize: {width: 200, height: 200, quality: 90, crop: true // crop to exact dimensions}, */multipart_params: {// additional parameters during upload, passed in as a key/value pair, the server uses $ _ POST to obtain these parameters (taking php as an example) "prefixName": "magazine "},3. During integration with UI libraries such as easyui and extjs, Plupload files must be introduced before easyui introduces files. Otherwise, easyui may encounter some inexplicable errors!
OK, here the use of Plupload is basically completed, plupload Chinese Reference Document http://www.phpin.net/tools/plupload,
This document only introduces the basic options of Plupload. For more information about advanced UI usage, see,
Http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method
The above section describes how to use the jQuery Plupload upload plug-in. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
