Published on

ASP.NET MVC - Fine Uploader (二)

在上一篇文章中最後有產出 js、css 和 html 的 template,我們先把 css 和 js 放到 mvc 的專案中

templates 資料夾下面會有兩個 html (default.htmlsimple-thumbnails.htm) 由檔名可以知道,一個可能是會有縮圖的功能, 這裡就拿 default.html 這個檔案來用

步驟如下:

  1. 拿 home/index 來修改,把不必要的 html 都刪除
  2. 加入一個 div 並且設定一個 id
  3. js 裡面,在 document.ready 的時候,去設定這個 div 為 fineUploader
  4. 並且給予上傳的路徑
  5. 在把 default.html 裡面的 script 放進來
  6. 在 controller 裡面建立一個「post」的 action 給前端上傳用

註:記得在頁面或是 layout 引入 css 和 js

html 如下:

js 如下:

controller 如下:


執行程式如果沒有問題的話,畫面上應該會有一個紅色的 Button

可以 Debug 看看是不是有接到前端上傳的檔案

不過如果後端什麼都不作,直接返回一個空的 json,這樣子前端會出錯

我們可以返回一個 successtrue,這樣子前端就會成功了


程式如下:

註:後端的檔案上傳處理並不是這裡需要在意的地方,所以並不會在這一個部份著墨太多

這樣子檔案上傳的初步就已經完成了


參考連結