ASP.NET MVC - Fine Uploader (三)

Posted on 2014-04-12

在 Fine Uploader(二) 中,我們已經完成基本的雛形,現在要來針對每個細節來作調整

這次的內容主要是下面兩個主題:

  1. 後端接收參數調整
  2. 傳入額外的參數

後端接收參數調整

上篇文章只有說用 InputStream 可以接到傳進來的資料, 如果我們可以利用強大的 model binding 來作處理應該會比較方便, 在這裡我們可以使用 HttpPostedFileBase 來作檔案的處理,

不過,我們的參數的命名要叫什麼? 這是一個大問題,如果名稱沒有對應的話是不會作 binding

官方的文件,可以知道預設的名稱為 qqfile, 原始碼的話在 3185行

controller 修改如下:

debug 可以看到傳進來的檔案了

如果要自定義這個參數的話,也是可以

JS 修改如下:

在這裡把名稱改為 uploadfile,相對的 controller 裡面的名稱也要修改

debeg 可以看到,一樣可以接到檔案


在後端還有三個參數可以使用 filenameParamuuidNametotalFileSizeName

  • filenameParam 預設名稱為 qqfilename ,主要是 檔案名稱
  • uuidName 預設名稱為 qquuid ,主要為 上傳時套件自已產生的 guid
  • totalFileSizeName 預設名稱為 qqtotalfilesize ,主要為 檔案的大小

官方文件如下:

原始碼在 3186 ~ 3188 行

測試一下,可以看到 qqfilenameHttpPostedFileBase 接到的 FileName 是相同的

qqtotalfilesizeHttpPostedFileBase 接到的 ContentLength 是相同的

檔案大小的話因為 HttpPostedFileBase 裡面已經有了, 所以其實不必在寫參數去接收, 檔案名稱因為會有修改檔名的問題,所以必須使用, 而 guid 在刪除檔案時會使用到

而這三個參數也是可以自定義,寫法跟 inputName 一樣,在這裡就不在說明了


傳入額外的參數

如果我們有傳入其它參數的必要, 可以在 js 裡面加上 params

官方文件 request.params

  • 註:可以看到 default{} ,所以可以傳入多參數

JS 修改如下:

後端就可以用 other 接收到前端傳來的參數, debug 看到可以接收到前端傳來的 abc123

不過這裡的參數是寫死的, 如果要動態傳入某個 input 的值就必須寫在 event 裡面才可以

官方文件 events

裡面有寫到,上傳前的事件主要有三個 submitsubmittedupload, 在這裡最好的執行點為 upload,也就是上傳前

  • 註:如果是分二階段上傳的話,寫在 submitted 會有影響,建議寫在 upload 就可以不用作修改

JS 修改如下:

可以在 function 裡面寫 console.log,先測試執行的順序

先在 html 裡面增加一個 input id 為 params, 在 onUpload 時去取這個 input 的值再設定給參數, 在 method 裡面有一個 setParams 可使用

官方文件 setParams

JS 修改如下:

  • 註:原本設定裡面的 params,跟這裡的 setParams 會有衝突,要把原本的註解掉

debeg 可以看到,已經可以接到來自前端 input 的內容了


參考連結