webuploader實現多文件上傳

問題:html

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

 2: 作個多文件上傳怎麼辦?web

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

(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:作個多文件上傳怎麼辦?app

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

由於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(",");
這樣就能夠去回多個文件的地址了,問題解決完了!
相關文章
相關標籤/搜索