Published on

ASP.NET MVC - Fine Uploader (一)

Fine Uploader 是很有名的上傳套件，記錄一下使用的過程。

這是 Fine Uploader 的官網

目前的版本是 4.4，Fine Uploader 是一套可以跨 Browser，也可以支援不同的後端程式的上傳套件

註：寫文章時的版本是 5.0

來到 downloads 頁面，會發現 Fine Uploader 要付費才可以使用， 不過 Fine Uploader 還是有 GPL V3 可以使用

這是 Fine Uploader 的 Github， 如果你把 GitHub 的代碼下載，會不知道要載入那一個 JS 檔， 試了很多的 JS 檔，按照 DOCS 寫 Code 都會發生 qq is not defined 的錯誤

其實內容大有文章， 在 DOCS 裡面有一個 Build Your Own， 裡面有寫到 怎麼 Build 出所需要的 js

下面來說明一下怎麼在 Windwos 下面操作：

  1. 準備步驟為安裝 git 和 node.js (在這裡就不示範 網路上有很多安裝教學) PS.. git 非必要安裝

  2. 打開 node.js 的 command prompt

  1. 輸入 npm install -g grunt-cli 來安裝 grunt 跑完就安裝好了

  2. 下載 Fine Uploader，這裡有三個方式下載：

  • a、如果前面有安裝 git 可以下指令 git clone git://github.com/Widen/fine-uploader
  • b、如果有安裝 GitHub for Windows 可以按 Clone in Desktop
  • c、如果都沒有的話，可以按 Download ZIP 來下載

  1. 下載完了之後使用 node.js 的 command prompt 下指令 cd c:\fine-uploader-master 進入 Fine Uploader 的資料夾 (在這裡的位置為 C:\fine-uploader-master)

  1. 下指令 npm install 確保所有依賴的組件都有安裝

  1. 跑完之後，下指令 grunt package，等跑出綠色的 Done, without errors. 字就好了

  1. 在原本資料夾的下面會多產出一個 _dist 資料夾

所有打包後的東西會在這裡，可以看到有壓縮檔和解壓縮後的資料夾

主要分成 3 個版本：一般網頁用、azure 和 s3 用

裡面可以在分成 js 的版本 和 jquery 的版本

如果沒有上傳到 azure 和 s3 的需求， 原則上只會用到 fineuploader-4.4.0 和 jquery.fineuploader-4.4.0 這兩個資料夾

到這一步就算完成，已經可以使用 js 來開發用

之後的操作會使用 jquery，所以我們使用 jquery 的版本 jquery.fineuploader-4.4.0

後面會分次說明怎麼使用 Fine Uploader 這個套件

參考連結：