使用ajaxfileupload.js實現上傳文件功能

使用ajaxfileupload.js實現上傳文件功能

一、ajaxFileUpload是一個異步上傳文件的jQuery插語法：$.ajaxFileUpload([options])

options參數說明：
1、url　　　　　　　　　　 上傳處理程序地址
2、fileElementId　　　　　 文件選擇框的id屬性，即的id
3、secureuri　　　　　　　 是否啓用安全提交，默認爲false
4、dataType　　　　　　　 服務器返回的數據類型。可以爲xml,script,json,html。如果不填寫，jQuery會自動判斷
5、success　　　　　　　　服務器響應成功後的處理函數 ，參數data就是服務器返回的數據
6、error　　　　　　　　　 服務器響應失敗後的處理函數
7、data 　　　　　　　　　 自定義參數，當有數據要和上傳的文件一起傳到後臺處理的時候會用到。這裏注意，數據格式比較嚴格{param:[{‘param1’:’value1’,’param2’:’value2’ },{‘param1’:’value3’,’param2’:’value4’ }]}, 其中單引號不能改爲雙引號
8、type 　　　　　　　　　 提交數據的方式，一般爲post

---

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件，注意先後順序：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>  
<script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>  

第二步、html代碼

原始的，控件展示效果如下：

因爲原始控件的樣式無法改變，所以我們一般會讓這個標籤隱藏，然後點擊別的標籤來觸發上傳控件。

<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" />  
<div class ="input-append">  
<label for ="importPicName"> 上傳原始圖片：</label >  
<input type ="text" class="input-large" id= "importPicName" />  
<a class ="btn btn-default" οnclick= "$('#ImportPicInput').click();" > 打開</a>  
</div >  

展現的頁面效果：

第三步、js代碼

在用戶選擇完上傳圖片後，需要把圖片名稱顯示到輸入框中，還需要在js文件中加入代碼：

$(document).ready(function(e) {  
      $('body').on('change',$('#ImportPicInput'),function(){  
            $( "#importPicName").val($( "#ImportPicInput").val());  
      });  
});  

上傳文件的js代碼：

$.ajaxFileUpload({  
    type: "POST",  
    url: "/toolkit/importPicFile.do",  
    data:{picParams:text},//要傳到後臺的參數，沒有可以不寫  
    secureuri : false,//是否啓用安全提交，默認爲false  
    fileElementId:'ImportPicInput',//文件選擇框的id屬性  
    dataType: 'json',//服務器返回的格式  
    async : false,  
    success: function(data){  
        if(data.result=='success'){  
            //coding  
        }else{  
            //coding  
        }  
    },  
    error: function (data, status, e){  
        /coding  
    }  
});  

第四步、java代碼

@RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" )  
  public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams,  
@RequestParam MultipartFile myfile,HttpServletRequest request){  

            Map<String,Object> map= new HashMap<String,Object>();  
             if(myfile.isEmpty()){  
                  map.put( "result", "error");  
                  map.put( "msg", "上傳文件不能爲空" );  
            } else{  
                  String originalFilename=myfile.getOriginalFilename();  
                  String fileBaseName=FilenameUtils.getBaseName(originalFilename);  
                  String floderName=fileBaseName+"_" +DateUtil.getNowTimeData();  
                   try{  

                        String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName);  
                         //把上傳的圖片放到服務器的文件夾下  
                        FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename));  
                         //coding  
                        map.put( "result", "success");  

                  } catch (Exception e) {  
                        map.put( "result", "error");  
                        map.put( "msg",e.getMessage());  

                  }  
            }  
            String result=String. valueOf(JSONObject.fromObject (map));  
             return result;  
      }  

三、注意點

（1）上文html中控件的css樣式，都是用的bootstrap框架裏的基本樣式，也可以不用使用bootstrap框架，僅做參考。
（2）之前用的live方法，前臺js報錯說找不到這個方法，後來查了資料才發現，1.9以上的jquery版本已經廢棄live這個方法了

$(document).ready(function(e) {  
    $('#ImportPicInput ').live( 'change', function(){  

        })  
}); 

(3)文件選擇框必須要有name，即，且java代碼中的變量要跟name的值保持一致，即@RequestParam MultipartFile myfile,這點非常的重要。