Use ext JS and swfupload to upload files in batches (with upload progress bars)

(For Original Articles, please indicate the source)

Swfupload: The Flash + JavaScript open source control is good, and batch upload is also good. But I feel that there are very few documents integrated into Java (I don't know how to batch upload J2EE ??)

Refer to how to use Ext on the Internet (Tian xiaode

, Thanks to such a beautiful interface idea), I made one myself.

This control is integrated into tapestry4. The basic idea is as follows:

1. The swfupload control uses the latest version v2.0.2 and flash9.

The upload URL of swfupload specifies the servlet of the Web application.

This

. Swfu

=

New

Swfupload ({

Upload_url:

"

/MyApp/swfupload

"

,

In servlet, you can use the common-fileupload API to parse the request to obtain the uploaded file.

2. Write the HTML file of tapestry. Just give the DIV to be displayed in ext.

<

Form

ID

= "Form1"

CID

= "@ Form"

>

 

<

Div

ID

= "Upgrid"

> </

Div

>

</

Form

>

Ext. Panel is used. Ext. Panel contains Ext. Grid. gridpanel.

3. The swfupload control provides callback interfaces for various events. In these events, write JS Code to update gridpanel data.

Event Callback interface:

New

Swfupload (

...

{

File_dialog_start_handler:

This

. Filedialogstart,

File_queued_handler:

This

. Filequeued,

File_queue_error_handler:

This

. Uploaderror,

File_dialog_complete_handler:

This

. Filedialogcomplete,

Upload_start_handler:

This

. Uploadfilestar,

Upload_progress_handler:

This

. Uploadprogress,

Upload_error_handler:

This

. Uploaderror,

Upload_success_handler:

This

. Uploadsuccess,

Upload_complete_handler:

This

. Uploadfilecomplete,

....

}

Compile the Event Callback interface (segment ):

Progressbartext:

'

Uploading: {0}, {1} % complete

'

,

Statubartext:

'

Total number of files to be uploaded: {0}, size: {1}

'

,

Statcinfotext:

'

Total: {0} successful uploads, {1} upload errors, and {2} pending uploads

'

Filequeued:

Function

(File)

...

{

VaR

OBJ

=

Uploaddialog;

VaR

Filetype

=

(File. type. substr (

1

). Touppercase ();

VaR

Data

=

[];

Data. Push ();

//

The uploadgrid is the grid of the gridpanel.

OBJ. uploadgrid. Store. loaddata (data,

True

);

VaR

Numqueueing

=

OBJ. uploadgrid. Store. getcount ();

OBJ. stateinfo. getel (). innerhtml

=

String. Format (

OBJ. statubartext, numqueueing, ext. util. format. filesize (obj. uploadgrid. Store. sum (

'

Size

'

)));

VaR

Numsuccess

=

Obj.swf U. getstats (). successful_uploads;

VaR

Numerror

=

Obj.swf U. getstats (). upload_errors;

OBJ. statcinfo. getel (). innerhtml

=

String. Format (obj. statcinfotext, numsuccess, numerror, numqueueing );

}

,