Have a chat. jquery Plug-in uploadify usage _jquery

Talk about the tortuous process of using Uploadify's twists:

The reason to choose Uploadify, is derived from their previous use of jquery website upload file Plug-ins, more difficult to use (the page to write more code, ie back to the background need to configure the format "not clear other upload plug-ins are also such"), and has been IE9 upload unsuccessful problems, By the time I left my home company, I had not solved the problem (perhaps the reason why I am relatively low). So before the use of Plug-ins to investigate the first. Uploadify offers two versions, Flash uploadify and HTML5 uploadfive. The document is relatively complete, the use of the online example page more, configuration page is relatively simple, so the first choice is him.

1. Initial Experience
Uploadify Flash version is free, and based on previous experience all browsers support Flash (this is the beginning of the tragedy), so plan to use only this version of the line.
Products to give the effect as follows (there are three picture preview box, each picture has a corresponding description, so you can not use a upload button, each upload button upload corresponding picture)

After the configuration of the chrome self-test through (there is a small twist in the middle, the product side want to upload more than one picture, at that time did not find the IE8 display processing. Later on the Internet to find an article, and then recorded a picture before uploading preview).

To test the situation of various browsers, in Firefox on a look, I faint, Firefox the latest version does not have a flash plug-in, the result is that even the style of file input has not changed, completely without effect. Previously wanted to join a DOM

<object data= "xxx.swf" height= "0" width= "0" ></object>

Let the browser detect the Flash file pop-up install flash prompts. Later think not Ah, in order to upload a file to allow users to install flash, too complex.

Finally decided to let support HTML5 use uploadifive upload, does not support the use of uploadify (Flash) version of the upload.
if (window.applicationcache) {//support HTML5
Two problems were encountered during the configuration of uploadify:
The 1.file INPUT element has the name attribute, but the use of flash needs to pass the past manually, that is, fileobjname this property, configuration uploadifive also need to pass this name.
2.fileSizeLimit setting file size does not seem to work. The last thing you can do is verify it yourself (onselect events), and the validation failure also needs to be handled by itself to cancel the upload (because I am configured to automatically upload ' auto ': TRUE)

 SWF uploads need to deal with this failure in Onuploaderror
$ (' # ' + opts.fileobjname). Uploadify (' Cancel '); 

It is also necessary to intercept this cancellation event in the Onuploaderror event after the cancellation, causing the trigger to be treated as a Onuploaderror event

 ' Onuploaderror ': function (file, errorcode, ErrorMsg, errorstring) {
 if (errorcode!=-280) {//Cancel upload error code is -280
 $. Dialog.error (' upload failed, try again ', {txtyes: ' I Know '}}} 
  

Here is the configuration of my uploadify.

/* dependent on jquery and $.dialog opts = {fileobjname: ' idcardpositive ', swf: ' uploadify/uploadify.swf ', showprogress:function (pr ogress) {},//progress:0-1 checkfile:function (file) {}, Normalonselect:function () {}, Normaluploaded:function (Id,data ), Positionclass: ' File-btn-left ',} */function init (opts) {var maxSize = 5242880;//1024 * 1024 * 5,5m $ (' # ' + opts.fi Leobjname). Uploadify ({' Filesizelimit ': maxSize, ' multi ': false,//can only choose one file ' auto ' at a time: true,/* if it is automatic upload, the upload button will be useless * * * Typeexts ': ' *.jpg;*.bmp;*.jpeg;*.png ', ' filetypedesc ': ' Please select image or video ', ' Queueid ': ' Filequeue ', ' width ': ' Height ': 14 0, ' buttontext ': ', ' fileobjname ': opts.fileobjname,//need to modify file name ' swf ': opts.swf, ' uploader ': '/pcapi/user/uploaduserch Angecardimage.htm ', ' onselect ': function (file) {//has a name is the SWF format file upload, HTML5 file upload parameters please refer to http://www.uploadify.com/ documentation/uploadifive/onselect-2///need to detect file type and size if (opts.checkfile (file)) {Opts.normalonselect (
 Opts.positionclass); }else{//swf upload need to handle this failure in Onuploaderror
 $ (' # ' + opts.fileobjname). Uploadify (' Cancel '); }, ' Onuploadprogress ': function (file, bytesuploaded, Bytestotal, totalbytesuploaded, totalbytestotal) {Opts.showprog 
 Ress (bytesuploaded/bytestotal); }, ' Onuploaderror ': function (file, errorcode, ErrorMsg, errorstring) {if (ErrorCode!=-280) {//Cancel upload error code is -280 $.DIALOG.E
 Rror (' upload failed, please try again ', {txtyes: ' I know '});
 }, ' Onuploadsuccess ': function (file, data) {opts.normaluploaded (opts.fileobjname,data);
}
 });

 }

A problem has been encountered when configuring Uploadifive:

The 1.fileTypeExts is set to "*.jpg;*.bmp;*.jpeg;*.png", but virtually all picture formats are selectable. So you can only check the format manually after you select the picture. And because the Onselect parameter queue does not have file type information: click View. So you can only detect in the Onaddqueueitem event, and then cancel the upload queue queues in onselect to cancel the automatic uploading of files.

 ' Onaddqueueitem ': function (file) {//HTML5 needs to detect its own format and size
 Filecheckresult = opts.checkfile (file);
 },
 ' Onselect ': function (queue) {
 if (filecheckresult) {
 opts.normalonselect (opts.positionclass);
 } else{
 $ (' # ' + opts.fileobjname). Uploadifive (' Clearqueue ');
 }
 ,

There may also be a problem is the need to configure ' FileType ': ' image/* ', because I directly set up, do not know if the setting will not have a problem, did not try

Here's my uploadifive configuration.

/* depends on jquery and $.dialog opts = {fileobjname: ' idcardpositive ',//name and ID are the same showprogress:function (progress) {},//progress : 0-1 checkfile:function (file) {}, Normalonselect:function (Positionclass) {}, Normaluploaded:function (Id,data), posit
 Ionclass: ' File-btn-left ',} */function init (opts) {var filecheckresult = true; var maxSize = 5242880;//1024 * 1024 * 5,5m $ (' # ' + opts.fileobjname). Uploadifive ({' Filesizelimit ': maxSize, ' multi ': false,//can only choose one file at a time ' auto ': true,/* if it is automatic upload, the upload button will be useless/' filetypeexts ': ' *.jpg;*.bmp;*.jpeg;*.png ', ' filetypedesc ': ' Please select image or video ', ' Queueid ': ' Filequeue ', ' width ': ' Height ': 140, ' buttontext ': ', ' fileobjname ': opts.fileobjname,// Need to modify file name ' DND ': false,//is not allowed to drag ' fileType ': ' image/* ', ' uploadscript ': '/pcapi/user/uploaduserchangecardimage.htm ', ' on
 Addqueueitem ': function (file) {//HTML5 needs to detect its own format and size Filecheckresult = opts.checkfile (file);
 }, ' Onselect ': function (queue) {if (Filecheckresult) {opts.normalonselect (opts.positionclass); }else{$ (' # ' + opts.fileobjname). Uploadifive (' Clearqueue ');
 }, ' OnProgress ': function (file, e) {opts.showprogress (e.loaded/e.total);
 }, ' OnError ': function (file, errorcode, ErrorMsg, errorstring) {$.dialog.error (' upload failed, try again ', {txtyes: ' I know '});
 }, ' Onuploadcomplete ': function (file, data) {opts.normaluploaded (opts.fileobjname,data);
}
 });
 }

2. The wake-up.
local test OK, put it in the test environment to test, immediately shocked.
The first problem encountered is that in IE many times click No response (no pop-up file selection box), looking for a half-day reason finally found: The document must be ready to initialize the uploadify, and ensure that the upload input is available (not display:none)
OK, you can select the file, but after the selection of files IE8/9 always throw call to Startupload failed abnormal, go online check, there are mainly several reasons

1). It is possible to have multiple uploaded div or input (containing the same name or ID) caused, if there are two different upload buttons, then their name,id to be set differently.

This is not a problem with the tab, but may have multiple uploaded div or input (containing the same name or ID) caused by
If there are two different upload buttons, then their name,id will be set differently.

<div id= ' total ' > 
 <input type= ' file ' name= ' total_upload ' id= ' total_upload ' multiple= ' true '
/> </div> 
<a href= "javascript:$ (' #total_upload '). Uploadify (' upload ', ' * ')" > Start uploading </a> 
<a href= "javascript:$ (' #total_upload '). Uploadify (' Cancel ', ' * ')" > all cancel Upload </a>

2). FLAsh cross domain cause (Flash upload source file and page in the domain of different "static resources are now unified under the Static.xxx.com server"). The reason for me is this, I follow the web said use in the server's root directory (the primary domain name of the project's root directory) to prevent the crossdomain.xml, but unfortunately did not work (perhaps because we use the server is not Apache server bar, the internet has children's shoes through this solution to this cross-domain problem). In the end my solution is to not let it cross the domain , I put the uploadify resources in the main domain name of the project under the root directory, and then request this directory of uploadify.swf files. Well, finally able to upload the file.

The final solution is to upload the problem, spend a lot of time, record down, hope that the back of useful uploadify children's shoes can take some detours less.