Shulou(Shulou.com)06/03 Report--

This article is about how to use WebUploader. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

HTML

We first load the css and related js files.

Then we need to prepare a button # imgPicker and a container # fileList to hold the list of added file information, and add the following code to the body:

Select Picture

JAVASCRIPT

First, create a Web Uploader instance:

Var uploader = WebUploader.create ({auto: true, / / whether to automatically upload swf: 'js/Uploader.swf', / / swf file path server:' upload.php', / / file receiving server pick:'# imgPicker', / / select the file button after the file is selected. Optional / / only picture files are allowed. Accept: {title: 'Images', extensions:' gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*'}})

Then listen to the fileQueued event, that is, when a file is added, create a picture preview through uploader.makeThumb.

Uploader.on ('fileQueued', function (file) {var $list = $("# fileList"), $li = $(''+')

'+' + file.name +'

'+'

'), $img = $li.find (' img'); / / $list is the container jQuery instance $list.append ($li); / / create thumbnail uploader.makeThumb (file, function (error, src) {if (error) {$img.replaceWith ('cannot be previewed'); return;} $img.attr ('src', src);}, 100,100); / / 100x100 is the thumbnail size})

Finally, the upload status indicates that during the file upload process, successful upload, failed upload and completed upload all correspond to uploadProgress, uploadSuccess, uploadError and uploadComplete events, respectively.

/ / create a progress bar for real-time display during file upload. Uploader.on ('uploadProgress', function (file, percentage) {var $li = $(' #'+ file.id), $percent = $li.find ('.progress span'); / / avoid duplicate creation of if (! $percent.length) {$percent = $('

') .appendTo ($li) .find (' span');} $percent.css ('width', percentage * 100 +'%');}); / / File uploaded successfully, add class to item successfully, upload successfully with style mark. Uploader.on ('uploadSuccess', function (file, res) {console.log (res.filePath); / / you can get the uploaded file path $(' #'+ file.id). AddClass ('upload-state-done');}); / / File upload failed, indicating an upload error. Uploader.on ('uploadError', function (file) {var $li = $(' #'+ file.id), $error = $li.find ('p.error'); / / avoid duplicate creation of if (! $error.length) {$error = $('

') .appendTo ($li);} $error.text (' upload failed');}); / / delete the progress bar first if the upload is completed, success or failure. Uploader.on ('uploadComplete', function (file) {$(' #'+ file.id). Find ('.progress') .remove ();})

At this point, we have implemented a simple picture upload example. Clicking "Select Picture" will bring up a file selection dialog box. When you select a picture, you will enter the process of uploading a picture and put the thumbnail corresponding to the picture in the list.

Common option settings and event calls

Web Uploader provides a wealth of API option settings and event calls.

Parameter description default value dnd [optional] specifies the container to be dragged by Drag And Drop. If it is not specified, it will not be started. UndefineddisableGlobalDnd [optional] specifies the container that listens for paste events, and if not, this feature is not enabled. This function is to add screenshot pictures by pasting. It is recommended to set to document.body.undefinedpick [optional], Object, specify the button container for selecting the file, and do not create the button if you do not specify it. Id {Seletor | dom} specifies the button container in which the file is selected. If it is not specified, the button is not created. Note that although id is written here, it supports not only id, but also class, or dom nodes. Label {String} Please use innerHTML instead of innerHTML {String} to specify button text. If it is not specified, it is preferred to see whether it has its own text from the specified container. Multiple {Boolean} whether to select multiple file capabilities at the same time. Undefinedaccept [optional] specifies acceptable file types. Title {String} text describes the file suffixes allowed by extensions {String}, without dots, multiple separated by commas. Multiple mimeTypes {String} are separated by commas. Nullthumb {Object} [optional] configure the option to generate thumbnails. Compress {Object} [optional] configure options for compressed images. If this option is false, the picture is not compressed before uploading. When auto [optional] is set to true, there is no need to manually call upload. Upload starts as soon as a file is selected. FalseruntimeOrder [optional] specifies the runtime startup order. By default, you will want to try whether html5 supports it, and if so, use html5, otherwise use flash. You can set this value to flash to force the use of the flash runtime. Html5,flashchunked [optional] whether to process uploading large files in parts. FalsechunkSize [optional] if you want to slice, how big is it? The default size is 5M.5242880chunkRetry [optional] if a shard fails due to a network problem, the number of automatic retransmissions is allowed. 2threads [optional] number of concurrent uploads. The maximum number of upload processes allowed at the same time. 3formData [optional] the parameter table of the file upload request, and the parameters in this object will be sent each time. {} fileVal [optional] sets the name of the file upload domain. FilefileNumLimit [optional] verify the total number of files. If the number is exceeded, you are not allowed to join the queue. UndefinedfileSizeLimit [optional] verifies that the total file size exceeds the limit, which is not allowed to join the queue. UndefinedfileSingleSizeLimit [optional] verifies that the size of a single file exceeds the limit, which is not allowed to join the queue. Undefinedduplicate [optional] to remove duplicates and generate hash Key.undefined based on file name, file size and last modification time

Common event descriptions:

The event parameter description describes that the beforeFileQueuedfile {File} File object is triggered before the file is queued, and the handler return value for this event is false, then the file will not be added to the queue. The fileQueuedfile {File} File object is triggered when the file is queued. FilesQueuedfile {File} array containing the original File (lib/File) object. Triggered when a batch of files is added to the queue. The fileDequeuedfile {File} File object is triggered when the file is removed from the queue. UploadStartfile {File} File object triggers before a file starts uploading, and a file is triggered only once. UploadBeforeSendobject {Object} data {Object} default upload parameters, which can be extended to control upload parameters. Headers {Object} can extend this object to control the upload header. When a part of a file is triggered before it is sent, it is mainly used to ask whether to add additional parameters. This event may be triggered multiple times when a large file starts multipart upload. Triggered during the upload process of uploadProgressfile {File} File object percentage {Number}, which carries the upload progress. UploadErrorfile {File} File object reason {String} an error code is triggered when an error is uploaded to the file. The data returned by the uploadSuccessfile {File} File object response {Object} server is triggered when the file is uploaded successfully. UploadCompletefile {File} [optional] the File object triggers when the file is uploaded, regardless of success or failure.

PHP handles file upload

Upload.php receives the uploaded data, saves the uploaded file to the relevant directory of the server, and informs the front-end upload component of the upload result.

It is worth mentioning here that if multipart upload of large files is set, PHP will temporarily save the small pieces of files uploaded each time, and then combine these temporary pieces of files into a complete large file after all the final pieces of files have been received.

Webuploader multipart upload is to divide the file into several parts, and then send the post data to the receiving end of the file you define. If the uploaded file is larger than the size of the shard, it will be sharded, and then two form elements chunk and chunks will be added to the post data. The former indicates the order of the current shard in the upload part (starting from 0), and the latter represents the total number of shards.

Thank you for reading! This is the end of the article on "how to use WebUploader". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.