本文讲解下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
1. import
2.
3.
4. public class
5.
6. private
7.
8. public
9. return
10. }
11.
12. public void
13. this.file = file;
14. }
15. }
16.
17.
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
1. public class
2.
3. private boolean
4.
5. public boolean
6. return
7. }
8. public void setSuccess(boolean
9. this.success = success;
10. }
11.
12. public
13. return "{success:"+this.success+"}";
14. }
15. }
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层
1. @Controller
2. @RequestMapping(value = "/upload.action")
3. public class
4.
5. @RequestMapping(method = RequestMethod.POST)
6. public @ResponseBody
7.
8. new
9.
10. if
11. for(ObjectError error : result.getAllErrors()){
12. "Error: " + error.getCode() + " - "
13. }
14.
15. //set extjs return - error
16. false);
17.
18. return
19. }
20.
21. // Some type of file processing...
22. "-------------------------------------------");
23. "Test upload: "
24. "-------------------------------------------");
25. if(uploadItem.getFile().getSize()>0){
26. try
27. "D://",uploadItem.getFile().getOriginalFilename());
28. catch
29. System.out.println(e.getMessage());
30. return null;
31. }
32. }
33. //set extjs return - sucsess
34. true);
35.
36. return
37. }
38.
39. /* **保存文件
40.
41. * @param stream
42. * @param path
43. * @param filename
44. * @throws IOException
45. */
46. public void SaveFileFromInputStream(InputStream stream,String path,String filename) throws
47. {
48. new FileOutputStream(path + "/"+ filename);
49. byte[] buffer=new byte[1024*1024];
50. int bytesum = 0;
51. int byteread = 0;
52. while ((byteread=stream.read())!=-1)
53. {
54. bytesum+=byteread;
55.
56. 0,byteread);
57. fs.flush();
58.
59. }
60. fs.close();
61. stream.close();
62. }
@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 - 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();
}
/* **保存文件
* @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了
1. <!-- Activates various annotations to be detected in bean classes -->
2. <context:annotation-config />
3.
4. this application for @Components
5. package="com.loiane"/>
6.
7. <!-- Configures Spring MVC -->
8. import resource="mvc-config.xml"/>
9.
10. <!-- Configure the multipart resolver -->
11. "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
12. <!-- one of the properties available; the maximum file size in bytes -->
13. "maxUploadSize" value="100000"/>
14.
15. </bean>
<!-- 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" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
<property name="maxUploadSize" value="100000"/>
</bean>
设置文件大小限制
一个很奇怪的问题是，在ie 7下，好象有点问题，待解决，但在firefox和chrome下都没问题，这个extjs 真怪，不用ext，普通的spring mvc是没问题的哦