Use Uploadify (UploadiFive) to upload multiple files.

Use Uploadify (UploadiFive) to upload multiple files.

The multi-file upload function needs to be implemented in recent projects. Therefore, the Uploadify control is selected as needed. Compared with other controls, Uploadify has a simple interface, and the functional API can basically solve most of the needs. It is also based on jquery and is relatively easy to configure. But you don't have to worry about it. I believe most people who have used it will encounter a lot of pitfalls. Let's share the process below:

Configure the front-end configuration items that I need according to the official website documents, and then let the background colleagues fix the corresponding background configuration, and then try some OK in chrome. I thought it would be a success? Haha... The problem arises.

 

1. Use Uploadify

(1) chrome errors

Press F12 to open the debug panel and refresh the page. The following error message is displayed:

What is this? The request failed 3 times, 2 times, and finally succeeded 1 time. Later, it was found that this error was reported only in chrome, probably because of chrome's security measures for swf files, because it does not affect functions, you have not taken care of it yet.

 

(2) fail to find Firefox

When I open Firefox, I suddenly find that the button is invalid. It is a type = 'file' button, which can only be uploaded for a single file. The reason is that Firefox cannot detect my flash. Uploadify is a multi-file upload function using flash, which is undoubtedly useless to users without flash Installation.

Okay, but I chose to endure it first, Because I developed a background application for my own users, so it's a big deal for them to install flash and use chrome to access it.

 

(3) the file will automatically disappear after being uploaded.

As required by the project, the file remains on the page after being uploaded and the corresponding information is displayed. However, Uploadify automatically deletes files on the page after successful Upload by default. This problem is easy to solve and can be implemented through corresponding APIs:

1 $("#file_upload").uploadify({2         'removeCompleted' : false,3         'swf'             : '/uploadify/uploadify.swf',4         'uploader'        : '/uploadify/uploadify.php' 5 });

Set removeCompleted to false. If you want to keep the files that failed to be uploaded on the page, you can set the value of 'removetimeout' to be unlimitedly large, so you do not need to set removeCompleted.

 

(4) files cannot be cleared after uploading.

If the uploaded file is retained, the file will not be cleared because you trigger the cancel method. Even if the file is excluded from the supernatant, after you select the uploaded file, the dialog box Indicating whether to overwrite the existing file is displayed.

After a long time, Baidu found that this was a recognized bug and there was no good solution for the moment. So I couldn't help it anymore. I decided to discard the flash version of Uploadify and use its html5 version of UploadiFive.

 

Ii. Use UploadiFive

However, since I changed UploadiFive, I feel a lot better at being decisive. The problems in the past (1) (2) (3) (4) are gone, I thought this was not forcing us to buy a paid version...

 

However, UploadiFive has abandoned some features in Uploadify:

(1) No duplicate prompts for files not uploaded

If a file with the same name is added to Uploadify, a message indicating whether to overwrite the file is displayed, while UploadiFive directly overwrites the file without prompting any information. Acceptable.

 

(2) The progress bar disappears after the upload is complete.

The progress bar is retained by default and 100% is displayed after the upload is completed in Uploadify. If removeCompleted is set to false, the progress bar disappears automatically after the upload is completed in UploadiFive. Barely accept.

 

(3) No automatic file size check function

After a file is added to the queue in Uploadify, the file size will be automatically added after the file name, But UploadiFive does not have this function. Didn't this mean to embarrass us ...... pretend to be unacceptable. So I began to study its source code.

The problem was solved more than an hour later.

The following is a solution:

First UploadiFive js file is compressed, it is best to restore its source code, In the sublime text3 install HTML-CSS-JS pretstrap plug-in after using the shortcut key shift + alt + H can quickly achieve js formatting.

After formatting, find the $ data. addQueueItem method in jquery. uploadifive. js.

File.queueitem.find('.filename'}.html (fileName) and then add

/* Add the following file size check */var fileSize = Math. round (file. size/1024); var suffix = 'kb'; if (fileSize> 1000) {fileSize = Math. round (fileSize/1000); suffix = 'mb';} var fileSizeParts = fileSize. toString (). split ('. '); fileSize = fileSizeParts [0]; if (fileSizeParts. length> 1) {fileSize + = '. '+ fileSizeParts [1]. substr (0, 2);} fileSize + = suffix?file.queueitem.find('.filesize'{.html ('+ fileSize +');/* check the file size added above */

Locate $ data. queueItem and add <span class = "filesize"> </span>

if (settings.itemTemplate == false) {   $data.queueItem = $('<div class="uploadifive-queue-item">\           <a class="close" href="#">X</a>\           <div><span class="filename"></span><span class="filesize"></span><span class="fileinfo"></span></div>\            <div class="progress">\                    <div class="progress-bar"></div>\             </div>\     </div>');} else {   $data.queueItem = $(settings.itemTemplate);}

So OK,

The above is my trap filling process. I believe many people will encounter it. I would like to share it with you!

At the same time, we recommend two other practical multi-File Upload controls, which can be used according to project requirements:

A, jQuery File Upload Official Website: http://blueimp.github.com/jQuery-File-Upload/

B, Baidu Web Uploader Official Website: http://fex.baidu.com/webuploader/

 

Original article. For more information, see [http://www.cnblogs.com/luozhihao]

Address: http://www.cnblogs.com/luozhihao/p/4959771.html