SWFUpload Introduction use swfupload Upload file

What is SWFUpload

SWFUpload is a website front-end file upload component. SWFUpload through the flash+javascript, the implementation of the Web page without refreshing the conditions, multiple files upload (in fact, upload-by-one), and display upload progress. SWFUpload Fundamentals

1, the traditional HTML form file upload

Traditional file uploads use the following form:

<form id= "File-form" action= "http://www.gearcode.com/upload.php" enctype= "Multipart/form-data" method= "POST" >
<input name= "filename" type= "file"/>
<input type= "Submit" value= "Upload"/> </form> ;

Such a form, each input file can only select a file, if the user wants to bulk upload, you need to use JS dynamic to add "<input type=" file "name=" filename "/>" in the form. Users need to click on each input file "Browse" button, open the Selection File window to select files one by one. Instead of opening a window that allows you to select multiple files, you can select one or more files at once using a shortcut key such as CTRL or SHIFT.

Moreover, when the user chooses a good file, click Upload, the form will be submitted out, as to the file upload progress, upload speed how, are unknown.

2, the use of swfupload after the upload

SWFUpload by inserting a flash button into the Web page, let the user click to eject the File selection dialog box. In other words, the Selection file dialog box, was shot by swfupload.swf, of course, this requires users to click this flash can. So SWFUpload needs to set the style of the buttons it displays when initializing, such as wide, high, background color, font, spacing, pictures, etc. ..... In addition to these styles, you need to set the location of the button display, as well as some other configurations, which are described in more detail later in this article.

Because the SWFUpload Selection file dialog box is ejected by flash, this dialog box can select multiple files. After selecting a good file, swfupload.swf will callback some JavaScript functions and pass some basic information about the selected file as parameters to the callback functions so that the developer can change the HTML by setting these callback functions to display the file information to the page.

After selecting the files to upload, the files will be added to the SWFUpload upload queue, and once the "startupload ()" Function of the SWFUpload instance is invoked, SWFUpload will upload the file to our designated address via Flash, This upload address can also be set when instantiating swfupload, and this address is an action to receive files, such as the action= "upload.php" in a traditional file upload form. It should be noted here that after invoking Startupload, SWFUpload only submits the first uploaded file in the queue, instead of submitting all the files in the uploaded file queue, if the file is uploaded, the startupload is called again, SWFUpload will start uploading the next file in the queue that is not uploaded. Therefore, if you want to achieve automatic bulk upload, you just have to upload the completed callback function, to call startupload on it.

In the upload process, swfupload will have a lot of events, such as upload start, upload progress changes, upload error, upload success, upload complete ... We can set up the callback functions for these events, swfupload to call our callback function when these events occur, and send the corresponding information as parameters to our callback function. So we can deal with these events to dynamically display the status of file upload, progress and other information.

preparations before the start

1. Get SWFUpload

SWFUpload's official address is: Http://www.swfupload.org/,SWFUpload's downloads are on Google code: http://code.google.com/p/swfupload/ Downloads/list, this article uses is: SWFUpload v2.2.0.1.

2. Online documentation

http://demo.swfupload.org/Documentation/

3, swfupload 2.2 demos

http://demo.swfupload.org/v220/index.htm use SWFUpload to upload files

1. Initialize SWFUpload

First, unzip the downloaded "SWFUpload v2.2.0.1 Core" package, get a swfupload.js, and a swfupload.swf (in the Flash directory) and copy the two files to your project. There will also be some other files in the package, such as documents in English, changelog, license, etc., which are not covered in this article and need not be imported into your project for practical application.

Introduce swfupload.js on the page using the SWFUpload Upload component:

<script type= "Text/javascript" src= "Http://www.gearcode.com/lib/swfupload/swfupload.js" type= "Text/javascript" ></script>

This swfupload.js is a JavaScript class library provided by the SWFUpload component that is used to initialize and set swfupload.swf. There is a function called "swfupload", where we initialize the swfupload by creating an instance of this function, passing in some initialization configuration information. It's important to note that you have to go to the new swfupload after the Web page is loaded, because the swfupload.swf is to determine where you are by replacing an HTML element in the page. So if you instantiate swfupload when the HTML element is not created, a JavaScript error occurs.

Instantiate the SWFUpload and set initialization parameters:

var swfu;
Here jquery is used, after the body onload, that is, after the completion of the Web page loading, the instantiation of the swfupload. $ (function () {swfu = new swfupload (config = = undefined?) {upload_url:path+ "/fileupload.action", flash_url:path+ "/plugin/uploader/swfupload/swfupload.swf", File_size_lim It: "KB", File_Types: "*.jpg;*.jpeg;*.png;*.bmp;*.gif", file_types_description: "All Image Files", File_post_n Ame: "Filequeue", button_placeholder_id: "Spanswfuploadbutton", Button_width:60, Button_height:20, button_t Ext: "<b> Add File </b>", Button_text_left_padding:3, Button_text_top_padding:2, Button_cursor:swfuploa D.cursor. HAND,//handler file_queued_handler:Handler.fileQueued, File_queue_error_handler:Handler.fileQueueError, Uplo Ad_complete_handler:Handler.uploadComplete, Upload_start_handler:Handler.uploadStart, Upload_progress_handler:ha
Ndler.uploadprogress, upload_success_handler:Handler.uploadSuccess});
 });

You can create a swfupload instance "Swfu" by using the above code, and subsequent operations on the file queue need to be done by invoking the method of this instance.

In the initialization parameter, "BUTTON_PLACEHOLDER_ID" is the ID of an HTML node on the page, and after the SWFUpload is successfully initialized, the node is replaced with swfupload.swf. Other parameters that start with "Button_" are used to set the display style of the swfupload.swf. Most initialization parameters are very simple, not to mention here, and users can check out the SWFUpload online documentation mentioned earlier. Here's one thing to note, after initializing the swfupload, the corresponding HTML node on the page is replaced with the Flash button we set, but if your page is not opened with an HTTP protocol, clicking on this button will not eject the Select File dialog box.

For example, I open a page directly in a folder on my desktop:

File:///C:/Documents and settings/jasonlee/Desktop/upload/upload.html

To open the page in this way, clicking on the Flash button will not eject the Select File dialog box. So when testing to deploy the page upload to the server, the HTTP protocol to open, for example:

Http://www.gearcode.com/demo/file-upload/upload.html

2. Start uploading

When the initialization is complete, clicking the Flash Upload button opens the Select File dialog box. When you select a good file, the dialog box closes and the selected file enters the upload queue. If you want to start uploading, you just need to call the SWFUpload startupload function, for example:

Swfu.startupload ();

However, if there are multiple files in the queue, the call to Startupload () will only upload the first file not uploaded, so the previous mentioned, SWFUpload bulk upload is the automatic upload file. If you want to implement automatic bulk upload only need to upload the file after successful, call the start upload method again. We can implement this by setting the SWFUpload handler function:

Upload_complete_handler:function (file) {
 this.startupload ();
}

3. Handler function

SWFUpload in the process of work, there will be many events. These events are useful to us (for example, to display file size, upload progress, speed, etc.) in the page, we can set the handler function to monitor these events, and when swfupload triggers these events, we will actively invoke the callback function we set. and pass the file information as a parameter to our callback function.

There are a number of handler functions for swfupload, here are only the following 6 common event callback functions: Event name initialization parameter name parameter event triggering filequeued file_queued_handler file each file into the upload queue triggered Filequeueerror file_queue_error_handler file, errorcode, message when each file enters the upload queue, the Uploadstart is triggered if an error occurs Upload_start_handler File triggers uploadprogress upload_progress_handler file, bytesloaded, when each file starts uploading, bytestotal triggered when the upload progress of each file is changed uploadsuccess Upload_success_handler file, serverdata after each file upload successfully triggers uploadcomplete upload_complete_handler file after each upload completes

For example, I need to listen for uploadprogress events, and then I need to set the value of the Upload_progress_handler parameter when SWFUpload initializes:

SWFU = new SWFUpload ({
 //Omitting other initialization parameters ...
 ) Upload_progress_handler:uploadprogress
});

Then set up the callback function for the listener event:

function uploadprogress (file, bytesloaded, bytestotal) {
 //...
}

In this way, the file upload, each upload progress changes, will call uploadprogress this function, and the file information, the number of bytes have been uploaded, the total number of bytes file sent to the callback function.

Other callback functions are used in the same way, not one by one, and finally the parameter file of the callback function is introduced. Almost all callback functions use file as an argument, file is a JavaScript object, and the structure is as follows (from an official online document):

{

id:string,

index:number,

name:string,

size:number,

type:string,

Creationdate:date,

modificationdate:date,

filestatus:number,

}

The following is a simple description of each property in the file object: The property name type description ID string swfupload The index value of the ID index number file generated for the file in the queue, and GetFile (index) is used to get the file name string The original filename, which does not contain the size of the size number file of the original file directory, Unit: Byte type string file type CreationDate Date file creation time Modificationdate date file last modified time Filesta Tus number file status in the upload queue, you can use the Swfupload.file_status comparison value closing

Thus far, we have mastered the basic use of swfupload. Because the author is not fine, ActionScript's knowledge is basically zero, so no longer in-depth analysis of SWFUpload code. I wrote the article at the same time, produced a demo, the code is ugly, only for rookie download:

Download Address:

Swfupload-demo.zip (57.23 KB)

Swfupload-demo.zip (57.23 KB)