webuploader實現多文件上傳


問題:

 1: 上傳失敗,不知道怎么在服務端寫返回值?

 2: 做個多文件上傳怎么辦?

 1:上傳失敗,不知道怎么在服務端寫返回值?

(1):首先在初始化Web Uploader  的方法寫上

server: 'http://localhost:8088/a/oa/oaNotify/uploadFile'  寫上服務端請求的地址
Controller 層可以寫:
@RequestMapping(value = "form")  請求接收   
也可以用異步AJAX請求接收
@RequestMapping(value = "save") 
@ResponseBody

但是需要注意的是如果是非異步調用的話需要返回的地址是你webupload控件頁面的地址,不然會一直上傳失敗!

這樣不寫返回值是鐵定報錯的!

需要寫成

@RequestMapping(value = "uploadFile")
public String uploadFile(){
   return "返回值寫的是webupload控件的頁面地址";
}

這樣第一個問題解決了。不會在上傳失敗了!

2:做個多文件上傳怎么辦?

找了好多資料百度搜了很多問題,發現都沒能解決!

因為webupload 插件是:比如當你選中4個文件,開始點擊上傳他是一個一個文件請求調用接口的!!!

這樣的話,如果我數據庫就一個字段保存文件的路徑用 ,  進行分割如:123.jsp,2123.txt   這里寫的是兩個文件的路徑,問題是他一個文件調用一次接口,那樣的話要從數據庫或者緩存中獲取到該字段的數據在插入在保存,這樣肯定是不行的!!!!!!!看着文檔API試過  multiple 這個屬性  結果代表的是在點擊選擇文件的時候是否允許同時選中多個文件的意思

pick: {
    id: '#filePicker',
    label: '點擊選擇文件',
    //  是否開啟同時選中多個文件的能力  
    multiple:false
},

threads {Boolean} [可選] [默認值:3]  上傳並發數。允許同時最大上傳進程數

這個API應該是寫錯了  並不是boolean 類型的 而是int  直接指定 如  threads:1  這樣

4個文件點擊上傳,debug攔截的時候,其實只是攔截了其中1個,其他3個在你debug的時候也在請求這個接口。也算是理解了並發這兩個字了

                           我的解決方法是

1:把接口寫成

@RequestMapping(value = "uploadFile")
@ResponseBody
public AjaxJson uploadFile(HttpServletRequest request){
   AjaxJson ajaxJson = new AjaxJson();
   //   記得在保存時候  在字段 路徑的尾巴加上標記如  file.txt, 
   String fileUri=  //保存附件到本地或者服務器上   返回文件的URI  地址
   ajaxJson.setSuccess(true);
   ajaxJson.put("fileUri",fileUri);
   return  ajaxJson;
}

在前端寫個隱藏input  標簽   
<input type="hidden" id="fileUri" name="accessory">

2:通過uploadSuccess這個事件,從response獲取到我們傳回前端的數據

uploader.on('uploadSuccess',function (file,response) {
    //  獲取input的值
    var fileUri = $("#fileUri").val();
    //  獲取文件的地址
    var beforeUri = response.body.fileUri;     // 獲取后端保存的文件地址
    //  保存在input標簽里面
    $("#fileUri").val(fileUri+beforeUri);
})

3:這樣每次調用后端接口成功后,都會觸發這個事件,在保存在隱藏的hidden標簽內。

在點擊提交的時候一並把多附件路徑一起提交保存在這個對象的fileUri字段中  用 , 逗號分隔

文件1,文件2,文件3,文件4,

4:取出來的時候通過 

String uri = "文件1,文件2,文件3,文件4,";
String[] fileUris = uri.split(",");
這樣就可以去回多個文件的地址了,問題解決完了!

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM