Flash multi-File Upload-fancyupload

FancyUpload, its official website: http://digitarald.de/project/fancyupload/ Application DeploymentThe file in the fancyupload folder is all the files required by the component, including four JS files, two images, and one swf file. It also contains a simple html page for testing.
Introduce JS files
On the page, introduce mootools-release-1.11.js, Swiff. Base. js, Swiff. Uploader. js, FancyUpload. js these four JS, the specific directory please set according to your own situation!
Set CSS styles on the page (mainly file lists and upload progress styles)
Call the following code in the onload method:
Var upload = new FancyUpload (
$ ("FileId "),
{
Swf: 'Swiff.Uploader.swf'
}
);
The meanings of related parameters are as follows:
FileId is the ID of the file field on our page, that is, the ID of the input element whose type is file;
{} Is the optional parameter. For more information, see the description in FancyUpload. js.

FancyUpload parameter description
Url
The file upload address. If this parameter is not specified, the action value of the form in which the file field is located is automatically taken for upload. If no value is specified for the action in the form, you will try to obtain the address in the path bar for file upload. In general, we need to specify either this parameter or the action of the form in which the file field is located!

Swf
Is the flash file in the component. It is mainly used to select files and filter files. Basically, you do not need to set it.

Multiple
Whether to select multiple files. The default value is true. This multiple-choice option means to press the ctr key in the open file dialog box to select multiple files.

Queued
Whether to allow queue upload. The default value is true.

Types
Specifies the type of the file to be uploaded. The format is {prompt: file type}. For example, if only media files are allowed to be uploaded: {"media files (*. rm ,*. avi) ":" *. rm ;*. avi "}

LimitSize
Specifies the size of the restricted file, in bytes! The default value is unlimited. files that exceed this value will not be selected. Note that this file is not displayed even after the selection! You can modify the file FancyUpload. js and add an alert prompt to the if statement in its 128 line!

LimitFiles
The maximum number of files. The default value is unlimited!

CreateReplacement
A user-defined function (the parameter is a file domain object) is used to replace the file domain. By default, it is replaced with a button! For specific code, see lines 101st to 111 in FancyUpload. js. By default, I have changed the button value to "Browse File" in Chinese ".

InstantStart
Indicates whether to start uploading immediately after the file is selected. The default value is false! We also recommend that you do not set it to true. The upload operation can be handed over to the submit button of the form in which the file field is located, which is automatically bound without any operation.

Allowduplicates
Whether to allow repeated files in the queue. The default value is false! The comment is true, while the code is false. Therefore, the comment in the Code prevails.

Container
The container object of the flash file. The default value is document. body. You do not need to modify it!

Optionfxduration
After a file is added to the queue, its brightness reaches the time when the brightness disappears. The default value is 250 ms! That is, the duration of the gradient.

Queuelist
To display the container object or its ID of the file queue in the list.

Oncomplete
Method called after a single file is uploaded successfully. It is non-Ajax and has no callback parameters. This method will be called once after each file is uploaded successfully!

Onallcomplete
Call method after all files are uploaded successfully!

Upload Form file fields and parameters at the same timeAfter you have tried this Upload Component, do you feel very useful? But you may also find a problem, that is, how to upload parameters in the form. This component is uploaded using FLASH + AJAX, that is, the page is not refreshed, and only the files you selected are uploaded during the upload process, all form non-file field parameters are ignored. So how can we synchronize the upload of files and parameters? There are several issues to note:

1) because this component is bound with the form's submit method, you cannot directly use $ ('form id') in Js '). submit () is used for form upload. Otherwise, the parameter is uploaded, but the file does not;

2) If no settings are made, you only need to select a file and trigger the submit event of the form. This component starts to upload the file, even if the onsubmit method is added, return false is invalid;

3) on the basis of article 2, how can we ensure that the user selects both the file and all the required parameters in the form?

Description:

1) First, check the parameters before uploading.
This includes the determination of mandatory parameters in the form and the selection of files. Since we cannot directly click the submit button for pre-submission check, we will use a common button to set an onclick event to check the parameters. This avoids the accidental submission of the selected file without any input parameters, and checks the integrity of the entire data. The Code is as follows:
<Input type = "button" value = "Submit" onclikc = "checksubmit ()"/>
In the checksubmit method, we can call the filelist attribute of the fancyupload object to determine whether a file is selected. The Code is as follows (assume that the Instance name of your fancyupload object is Uploader ):
If (uploader. filelist. Length <1 ){
Alert ('select the file to upload! ');
}
You can check whether a file is selected by judging the length of this attribute (array type). You need to determine the number of files by yourself. Here is a file.

2) Form submission
After the parameter check is complete, we can start to upload files and form parameters. Here, our files and form parameters cannot be submitted together. We can only upload files first, after the upload is successful, submit our form parameters.
The first step is to upload a file. We have already mentioned that we cannot directly submit the form in JS. Otherwise, we will not be able to upload the file. Here we adopt a roundabout approach, hide a submit button in the form. The Code is as follows:
<Input type = "submit" id = "mysubmit" style = "display: none"/>
Then we add the following code at the end of the checkSubmit function:
......
$ ("Mysubmit"). submit ();
......
In this way, we use a hidden submit button to trigger the form's submit event, so that we can smoothly upload files.
Step 2: After the file is uploaded successfully, submit the parameter again. The trigger function of the file upload is defined on the onComplete of the FancyUpload object, however, Multifile upload is defined on onAllComplete. We recommend that you define all the files on onAllComplete, as shown below:
OnAllComplete: function (){
$ ("Your form Id"). submit ();
}
Here, we can directly call the form's submit to submit parameters. Of course, you can also use AJAX to submit parameters, which depends on your needs.

3) the path of the uploaded file and the binding of form parameters
Because our file upload and form parameter upload are divided into two parts for upload, there is a problem of how to bind the two upload parameters. In addition, the author does not provide a solution for viewing the official comments, and the component can only detect the status code when an error occurs (00 <status <300 ), if the upload is successful, no response information can be obtained. Currently, my solution is:
1. After the file is uploaded successfully, the path information is stored in the session with the original file name as the key;
2. Obtain the upload path information from the session according to the name of the original file during the parameter upload.