使用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" onclick= "$('#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,這點非常的重要。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
圖片精選
