- 论坛徽章:
- 0
|
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
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 (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了
Java代码- <!-- 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是没问题的哦 |
|