Extjs4 and spring mvc3 upload files

Last Update:2013-12-12 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article explains the example of using extjs4 with spring mvc3 annotations to upload files.

1 page file
<! -- Ext JS Files -->
<Link rel = "stylesheet" type = "text/css" href = "/extjs4-file-upload-spring/extjs/resources/css/ext-all.css"/>
<Script type = "text/javascript" src = "/extjs4-file-upload-spring/extjs/bootstrap. js"> </script>

<! -- File upload form -->
<Script src = "/extjs4-file-upload-spring/js/file-upload.js"> </script>

</Head>
<Body>

Click on "Browse" button (image) to select a file and click on Upload button

2 EXTjs files
Ext. onReady (function (){

Ext. create ('ext. form. Panel ',{
Title: 'file upload ',
Width: 400,
BodyPadding: 10,
Frame: true,
RenderTo: 'fi-form ',
Items :[{
Xtype: 'filefield ',
Name: 'file ',
FieldLabel: 'file ',
LabelWidth: 50,
MsgTarget: 'day ',
AllowBlank: false,
Anchor: '20140901 ',
ButtonText: 'select a File ...'
}],

Buttons :[{
Text: 'upload ',
Handler: function (){
Var form = this. up ('form'). getForm ();
If (form. isValid ()){
Form. submit ({
Url: 'upload. action ',
WaitMsg: 'uploading your file ...',
Success: function (fp, o ){
Ext. Msg. alert ('success', 'Your file has been uploaded .');
}
});
}
}
}]
});

});

3. bean for uploading files

Java code
Import org. springframework. web. multipart. commons. CommonsMultipartFile;

Public class FileUploadBean {

Private CommonsMultipartFile file;

Public CommonsMultipartFile getFile (){
Return file;
}

Public void setFile (CommonsMultipartFile file ){
This. file = file;
}
}

4. In order for extjs to display information, design another bean
Java code
Public class ExtJSFormResult {

Private boolean success;

Public boolean isSuccess (){
Return success;
}
Public void setSuccess (boolean success ){
This. success = success;
}

Public String toString (){
Return "{success:" + this. success + "}";
}
}

In fact, the returned result is successful.

5 controller Layer

Java code
@ Controller
@ RequestMapping (value = "/upload. action ")
Public class FileUploadController {

@ RequestMapping (method = RequestMethod. POST)
Public @ ResponseBody String create (FileUploadBean uploadItem, BindingResult result ){

ExtJSFormResult extjsFormResult = new ExtJSFormResult ();

If (result. hasErrors ()){
For (ObjectError error: result. getAllErrors ()){
System. err. println ("Error:" + error. getCode () + "-" + error. getdefamessage message ());
}

// Set extjs return-error
ExtjsFormResult. setSuccess (false );

Return extjsFormResult. toString ();
}

// Some type of file processing...
System. err. println ("-------------------------------------------");
System. err. println ("Test upload:" + uploadItem. getFile (). getOriginalFilename ());
System. err. println ("-------------------------------------------");
If (uploadItem. getFile (). getSize ()> 0 ){
Try {
SaveFileFromInputStream (uploadItem. getFile (). getInputStream (), "D: //", uploadItem. getFile (). getOriginalFilename ());
} Catch (IOException e ){
System. out. println (e. getMessage ());
Return null;
}
}
// Set extjs return-sucsess
ExtjsFormResult. setSuccess (true );

Return extjsFormResult. toString ();
}

/*** Save the file

* @ Param stream
* @ Param path
* @ Param filename
* @ Throws IOException
*/
Public void SaveFileFromInputStream (InputStream stream, String path, String filename) throws IOException
{
FileOutputStream fs = new FileOutputStream (path + "/" + filename );
Byte [] buffer = new byte [1024*1024];
Int bytesum = 0;
Int byteread = 0;
While (byteread = stream. read ())! =-1)
{
Bytesum + = byteread;

Fs. write (buffer, 0, byteread );
Fs. flush ();

}
Fs. close ();
Stream. close ();
}

As you can see, when an error occurs, extjsFormResult. setSuccess (false );

Return extjsFormResult. toString ();
These two statements are returned to the front-end ext js for processing.
Finally, configure MVC.

Java code
<! -- Activates varous annotations to be detected in bean classes -->
<Context: annotation-config/>

<! -- Scans the classpath of this application for @ Components to deploy as beans -->
<Context: component-scan base-package = "com. loiane"/>

<! -- Configures Spring MVC -->
<Import resource = "mvc-config.xml"/>

<! -- Configure the multipart resolver -->
<Bean id = "multipartResolver" class = "org. springframework. web. multipart. commons. CommonsMultipartResolver">
<! -- One of the properties available; the maximum file size in bytes -->
<Property name = "maxUploadSize" value = "100000"/>

</Bean>

Set file size limit

A strange problem is that in ie 7, there seems to be a problem to be solved, but there is no problem in firefox and chrome. This extjs is really strange and does not need ext, normal spring mvc is okay.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Extjs4 and spring mvc3 upload files

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support