EXTJS3 + swfUpload2.2 Implement multi-file upload control

To select multiple file uploads in the Exrtjs framework,Fileuploadfield has been unable to meet the requirements, so the swfupload upload Control, the upload window is as follows:

Multi-select files to upload (in fact, each file asynchronous upload), you can stop the file upload, remove the selected files and other operations. The upload window code is as follows:

var ctx = ' <%=request.getcontextpath ()%> ';

 Ext.onready (function () {Ext.QuickTips.init ();  New  Ext.window ({width: 650, Title: ' Select destination file Upload ', Height: 3                XX, layout: ' fit ', items: [{xtype:' Uploadpanel ',                Border:  false, fileSize: 1024*50,// limit file size KB Uploadurl:ctx+'/uploadfiles.action ', flashurl:ctx+'/swfupload.swf ',//flash file path Filepostname: ' file ', /// background receive parameter name filetypes: ' *. * ',// can upload file type *.doc postparams: {savepath: ' upload '} //parameters to be uploaded to the background }]}). Show ();}); 

After the list is built, the AfterRender listener function adds the Flash Generate File Selection window:

Keel. UploadPanel.superclass.constructor.call ( This, {tbar: [{text:' Add file ', Iconcls: ' Add ', ref: '. /addbtn '}, '--', {text:' Upload ', ref: '. /uploadbtn ', Iconcls: ' Up ', handler: This. Startupload,scope: This},‘-‘, {text:' Stop uploading ', ref: '. /stopbtn ', iconcls: ' Delete ', handler: This. Stopupload,scope: This, Disabled:true},‘-‘, {text:' Remove all ', ref: '. /deletebtn ', iconcls: ' Delete2 ', handler: This. Deleteall,scope: This},‘-‘], layout:' Fit ', items: [ This. GP], listeners: {‘AfterRender‘: Function () {var em= This. Gettoptoolbar (). Get (0). El.child (' em '); var Placeholderid=ext.id (); Em.setstyle ({position:' Relative ', display:' Block '                }); Em.createchild ({tag:' Div ', Id:placeholderid});  This. swfupload =NewSWFUpload (Ext.apply ( This. setting,{button_width:em.getWidth (), Button_height:em.getHeight (),                button_placeholder_id:p Laceholderid}));  This. swfupload.uploadstopped =false; Ext.get ( This. Swfupload.moviename). SetStyle ({position:' Absolute ', Top:0, left : -2//This is set to 0, otherwise the flash-biased right button fails                }); }, Scope: This, Delay:100        }    });

Background Uploadfiles.action upload succeeded {"Success": true}, upload failed to return {"Success": false}, foreground receive processing:

 //event handler triggered after successful file upload
onuploadsuccess:function (file, serverdata) {var me = This. Customsettings.scope_handler; var ds=Me.gp.store; if(Ext.util.JSON.decode (serverdata). Success) { for(Var i=0;i<ds.getcount (); i++) {var rec=Ds.getat (i); if(Rec.get (' id ') = =file.id) {Rec.set (' State ', File.filestatus);                Rec.commit (); }            }                    }Else{             for(Var i=0;i<ds.getcount (); i++) {var rec=Ds.getat (i); if(Rec.get (' id ') = =file.id) {Rec.set (' percent ', 0); Rec.set (' State ',-3);                Rec.commit ();    }}} me.linkbtnevent (); }

index.jsp The page code is as follows:

<%@ page language= "Java"Import= "java.util.*" pageencoding= "Utf-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

heartfelt thanks to Http://czpae86.iteye.com/blog/834123?page=2#comments

-------------------------------Gorgeous split-line----------------------------------

Full of joy to submit the code, but the test that colleague feedback Firefox can not upload, after looking for many people on the Internet encountered this situation, the original is Firefox use swfupload Flash upload file session lost this bug. Because the project background to do the login user Rights control, click on the upload when the verification did not pass the request was discarded, so the file upload failed.

Online technology Danale has the following articles:

When the page needs to use the user information in the session, it cannot be used for normal file upload under Firefox. Under IE, the Upload tool can work, and one to Firefox, SWFUpload will prompt error 302. By grabbing the packet from Fiddler, the request to upload the file was redirected to the landing page by 302, so the file could not be uploaded properly. In other words, the session information after the user logged in has been lost in the upload request sent by Flash. Another look at the header of the request, there is no cookie value that can be used to identify the current session ID (for jsessionid,php to PHPSESSID, etc.). What is the reason for this? After a search, I found an official Adobe article, saying:

If

Well, this explanation makes it clear that Flash files uploaded under Firefox will not use the session ID in the browser cookie, but it does not seem to answer the "why" in the article title, that is, why not use the session ID in the browser to communicate.

It seems that the cookie is not expected, it can only be described above as the "manual" pass the session ID. So we can stitch a string like this in the URL ";jsessionid=blahblah" (note that before the path is spelled, before the argument), like this:

Uploadurl: ' http://Example.com/app;jsessionid=blahblah '

As specified in the Servlet specification 7.1.3 section, when a client does not accept cookies, the servlet container should be able to parse out the jsessionid in such URLs to maintain the state of the current session. There are similar mechanisms in other server-side environments. So we have made some changes to the file upload function: When the user enters the upload page, the current session ID is written to the page, as a JavaScript variable stitching to the target URL of the SWFUpload upload file, Flash can take advantage of our manually passed Jsess Ionid to stay in the state of landing. When the upload is started, Flash sends data to the server through its own connection channel, but because the requested path contains session information, it can be synchronized with the browser's session state, and the server can obtain the user's login information through the session ID in the URL.

As a result, the302 error was resolved and everything seemed OK. However, soon we found a new problem: when the user opened the upload page after a long time no operation, the server side of the session timeout, this time to upload the file with or timeout the session ID, so will fail is also should. But when this time the user re-login, again into the upload page upload, but still will fail, only restart the browser to upload again. What is this for? From the server-side error, or the user's login information loss problem, that is, Flash in the uploading of files, or the user has failed to log on the session ID successfully passed to the server side. By grasping the packet analysis in the Fiddler, we finally found the reason.

Article source http://lync.in/session-trap-on-uploading-files-using-flash-in-firefox/

This method can solve most of the users encounter seesion lost problem, but my project is called JSF Unified login interface, did not get the first class domain name cookie generated, in accordance with this solution to upload the request or will be discarded, the burn of a few hours, Suddenly thought to let the upload method is not interceptor interception does not solve it, situations, finally in the Interceptor configuration file modified:

exclude.path=/common/uploadfiles.do,/common/uploadimgs.do

After such a process has basically implemented a multi-file upload function, the code for uploading files in the background is not used to seesion this situation.

EXTJS3 + swfUpload2.2 Implement multi-file upload control