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> struts获取各种表单的数据
<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 - 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了
 
<!-- 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是没问题的哦

你可能感兴趣的:(extjs4,spring mvc3上传文件)