extjs4,spring mvc3上传文件
本文讲解下extjs4结合spring mvc3的注解完成上传文件的例子。
1 页面文件
<!-- 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
<div id="fi-form" style="padding:25px;"></div>
</body>
2 EXTjs的文件
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: 'File Uploader',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: 'fi-form',
items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
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
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 为了让extjs显示信息，再设计一个bean
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+"}";}}这里其实是返回是否成功
5 controller层
@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.getDefaultMessage());}//set extjs return - errorextjsFormResult.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 - sucsessextjsFormResult.setSuccess(true);return extjsFormResult.toString();}/* **保存文件 * @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(); } 可以看到，当出现错误时，extjsFormResult.setSuccess(false);
return extjsFormResult.toString();
这两句返回给前端ext js处理。
最后就是配置MVC了
<!-- Activates various 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" value="100000"/> </bean>
设置文件大小限制
一个很奇怪的问题是，在ie 7下，好象有点问题，待解决，但在firefox和chrome下都没问题，这个extjs 真怪，不用ext，普通的spring mvc是没问题的哦