extjs4,spring mvc3上传文件(一)

2014-11-24 01:40:04 · 作者: · 浏览: 5

本文讲解下extjs4结合spring mvc3的注解完成上传文件的例子。

1 页面文件


<script type="text/java script" src="/extjs4-file-upload-spring/extjs/bootstrap.js">


<script src="/extjs4-file-upload-spring/js/file-upload.js">


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



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

Java代码
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
Java代码
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层

Java代码
@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 (IOExcepti