java extjs文件上传_extjs4,spring mvc3上传文件

1 页面文件

struts获取各种表单的数据

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

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 - 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了

设置文件大小限制

一个很奇怪的问题是，在ie 7下，好象有点问题，待解决，但在firefox和chrome下都没问题，这个extjs 真怪，不用ext，普通的spring mvc是没问题的哦

posted on 2011-07-27 10:26 墙头草 阅读(2463) 评论(2)  编辑  收藏