jquery之ajaxfileupload异步上传插件【转】

由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader

jquery.js
ajaxfileupload.js
struts2所依赖的jar包
及struts2-json-plugin-2.1.8.1.jar
编写文件上传的Action 
 
package 
   com.ajaxfile.action;

 
  import 
   java.io.File;
 
  import 
   java.io.FileInputStream;
 
  import 
   java.io.FileOutputStream;

 
  import 
   org.apache.struts2.ServletActionContext;

 
  import 
   com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings( 
  " 
  serial 
  " 
  )
 
  public 
    
  class 
   FileAction  
  extends 
   ActionSupport {

     
  private 
   File file;
     
  private 
   String fileFileName;
     
  private 
   String fileFileContentType;

     
  private 
   String message  
  = 
    
  " 
  你已成功上传文件 
  " 
  ;
    
     
  public 
   String getMessage() {
         
  return 
   message;
    }

     
  public 
    
  void 
   setMessage(String message) {
         
  this 
  .message  
  = 
   message;
    }

     
  public 
   File getFile() {
         
  return 
   file;
    }

     
  public 
    
  void 
   setFile(File file) {
         
  this 
  .file  
  = 
   file;
    }

     
  public 
   String getFileFileName() {
         
  return 
   fileFileName;
    }

     
  public 
    
  void 
   setFileFileName(String fileFileName) {
         
  this 
  .fileFileName  
  = 
   fileFileName;
    }

     
  public 
   String getFileFileContentType() {
         
  return 
   fileFileContentType;
    }

     
  public 
    
  void 
   setFileFileContentType(String fileFileContentType) {
         
  this 
  .fileFileContentType  
  = 
   fileFileContentType;
    }

    @SuppressWarnings( 
  " 
  deprecation 
  " 
  )
    @Override
     
  public 
   String execute()  
  throws 
   Exception {
        
        String path  
  = 
   ServletActionContext.getRequest().getRealPath( 
  " 
  /upload 
  " 
  );

         
  try 
   {
            File f  
  = 
    
  this 
  .getFile();
             
  if 
  ( 
  this 
  .getFileFileName().endsWith( 
  " 
  .exe 
  " 
  )){
                message 
  = 
  " 
  对不起,你上传的文件格式不允许!!! 
  " 
  ;
                 
  return 
   ERROR;
            }
            FileInputStream inputStream  
  = 
    
  new 
   FileInputStream(f);
            FileOutputStream outputStream  
  = 
    
  new 
   FileOutputStream(path  
  + 
    
  " 
  / 
  " 
  + 
    
  this 
  .getFileFileName());
             
  byte 
  [] buf  
  = 
    
  new 
    
  byte 
  [ 
  1024 
  ];
             
  int 
   length  
  = 
    
  0 
  ;
             
  while 
   ((length  
  = 
   inputStream.read(buf))  
  != 
    
  - 
  1 
  ) {
                outputStream.write(buf,  
  0 
  , length);
            }
            inputStream.close();
            outputStream.flush();
        }  
  catch 
   (Exception e) {
            e.printStackTrace();
            message  
  = 
    
  " 
  对不起,文件上传失败了!!!! 
  " 
  ;
        }
         
  return 
   SUCCESS;
    }

} 
 
struts.xml
 
 
<? 
  xml version="1.0" encoding="UTF-8"  
  ?> 
  
 
  <! 
  DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd" 
  > 
  
 
  < 
  struts 
  > 
  
     
  < 
  package  
  name 
  ="struts2" 
   extends 
  ="json-default" 
  > 
  
         
  < 
  action  
  name 
  ="fileUploadAction" 
   class 
  ="com.ajaxfile.action.FileAction" 
  > 
  
             
  < 
  result  
  type 
  ="json" 
   name 
  ="success" 
  > 
  
                 
  < 
  param  
  name 
  ="contentType" 
  > 
  
                    text/html
                 
  </ 
  param 
  > 
  
             
  </ 
  result 
  > 
  
             
  < 
  result  
  type 
  ="json" 
   name 
  ="error" 
  > 
  
                 
  < 
  param  
  name 
  ="contentType" 
  > 
  
                    text/html
                 
  </ 
  param 
  > 
  
             
  </ 
  result 
  > 
  
         
  </ 
  action 
  > 
  
     
  </ 
  package 
  > 
  
 
  </ 
  struts 
  >

注意结合Action观察struts.xml中result的配置。 

contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。 
文件上传的jsp页面

<% 
  @ page language 
  = 
  " 
  java 
  " 
   contentType 
  = 
  " 
  text/html; charset=UTF-8 
  " 
  
    pageEncoding 
  = 
  " 
  UTF-8 
  " 
  %> 
  
 
  <! 
  DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 
  > 
  
 
  < 
  html 
  > 
  
     
  < 
  head 
  > 
  
         
  < 
  meta  
  http-equiv 
  ="Content-Type" 
   content 
  ="text/html; charset=UTF-8" 
  > 
  
         
  < 
  title 
  > 
  Insert title here 
  </ 
  title 
  > 
  
         
  < 
  script  
  type 
  ="text/javascript" 
   src 
  ="js/jquery.js" 
  ></ 
  script 
  > 
  
         
  < 
  script  
  type 
  ="text/javascript" 
   src 
  ="js/ajaxfileupload.js" 
  ></ 
  script 
  > 
  
         
  < 
  script  
  type 
  ="text/javascript" 
  > 
  
     
  function 
   ajaxFileUpload()
    {
        
        $( 
  " 
  #loading 
  " 
  )
        .ajaxStart( 
  function 
  (){
            $( 
  this 
  ).show();
        }) 
  // 
  开始上传文件时显示一个图片 
  
 
          .ajaxComplete( 
  function 
  (){
            $( 
  this 
  ).hide();
        }); 
  // 
  文件上传完成将图片隐藏起来 
  
 
          
        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action', 
  // 
  用于文件上传的服务器端请求地址 
  
 
                  secureuri: 
  false 
  , 
  // 
  一般设置为false 
  
 
                  fileElementId:'file', 
  // 
  文件上传空间的id属性  <input type="file" id="file" name="file" /> 
  
 
                  dataType: 'json', 
  // 
  返回值类型 一般设置为json 
  
 
                  success:  
  function 
   (data, status)   
  // 
  服务器成功响应处理函数 
  
 
                  {
                    alert(data.message); 
  // 
  从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量 
  
 
                      
                     
  if 
  ( 
  typeof 
  (data.error)  
  != 
   'undefined')
                    {
                         
  if 
  (data.error  
  != 
   '')
                        {
                            alert(data.error);
                        } 
  else 
  
                        {
                            alert(data.message);
                        }
                    }
                },
                error:  
  function 
   (data, status, e) 
  // 
  服务器响应失败处理函数 
  
 
                  {
                    alert(e);
                }
            }
        )
        
         
  return 
    
  false 
  ;

    }
     
  </ 
  script 
  > 
  
     
  </ 
  head 
  > 
  
     
  < 
  body 
  > 
  
         
  < 
  img  
  src 
  ="loading.gif" 
   id 
  ="loading" 
   style 
  ="display: none;" 
  > 
  
         
  < 
  input  
  type 
  ="file" 
   id 
  ="file" 
   name 
  ="file" 
    
  /> 
  
         
  < 
  br  
  /> 
  
         
  < 
  input  
  type 
  ="button" 
   value 
  ="上传" 
   onclick 
  ="return ajaxFileUpload();" 
  > 
  
     
  </ 
  body 
  > 
  
 
  </ 
  html 
  >

 注意观察<body>中的代码，并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序，ajaxfileupload.js依赖于jquery因此你知道的。