<-- IE錯誤修正 --> asp.net Web開發框架 (8) - 使用krajee進行非同步檔案上傳 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > PHP / ASP.NET / HTML5 / jQuery > HTML5 = TAG + CSS3 + JavaScript APIs > jQuery 討論區 (jQuery 豐富資源)

jQuery 討論區 (jQuery 豐富資源) 包含 jQuery 有關學習、教學、Frameworks 使用、程式與應用範例等,將集中於此。


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2017-02-02
進階會員
 
註冊日期: 2007-12-19
文章: 119
酷 asp.net Web開發框架 (8) - 使用krajee進行非同步檔案上傳

這一篇介紹Bootstrap File Input這個套件,之所以會被歸類到asp.net Web開發框架系列,是因為整個套件和我們採用asp.net走SPA架構(不管是用WebForms或WebAPI)都非常的速配。

檔案上傳範例

首先我們有一個範例位於Github,如果你想要測試,下載這個範例基本上已經擁有所有你需要的檔案。請使用Visual Studio運行index.html這個檔案(對,沒錯,是pure html5),執行起來的畫面像是底下這樣:
Click the image to open in full size.

這個套件精彩的地方是上傳預覽畫面,上圖中,你會看到,它除了支援中文、多檔上傳、非同步上傳,還支援圖片預覽、Mp3檔案甚至可以撥放,會不會太誇張了點? 是的,人家就是支援…更不用說UI的部分原生支援正體中文(包含zh-TW的多國語言)這也是我們使用此套件的原因。

如何使用

整個套件的使用可以完全採用AJAX方式,搭配我們的SPA架構非常之合拍,也因此,你在運行該範例的時候,會發現只需要執行index.html即可(當然伺服器端接收檔案的部分還是需要Server Code,這我們後面說明)。

如果你看index.html,會發現程式碼如下:


我們先看55行的部分,這是定義一個Input標記,其中的multiple意味著支援多檔上傳,data-show-preview="true"則是支援顯示預覽視窗。當然這些設定都可以在後面透過js來更動。

而66行javaScript所呼叫到的setupFileUploadBox(),就是進行相關的設定,其中language: 'zh-TW' 指定了多語UI支援中文(請留意這也是我們在19行引用了locales/zh-TW.js的原因),而後面幾個參數應該不需要太多解釋,showUpload是顯示上傳按鈕,uploadAsync說明了採用非同步上傳,maxFileCount指定了檔案上傳上限。

比較重要的是uploadUrl,這個參數指定了非同步檔案上傳的接收位置,這部分我們待會後面介紹。

先看on後面的幾個事件hook:
Click the image to open in full size.

fileuploaded發生在檔案上傳完成之後(嚴格說起來是伺服器端回應之後),而ilepreupload則發生在上傳之前,如果你還需要hook其他事件,可以參考該套件的官網說明(這套件的事件方法支援都算相當完整)

我們在fileuploaded這段程式碼當中,也只是把上傳完成之後,伺服器端傳來的檔案路徑(URL)給顯示出來而已…
Click the image to open in full size.

伺服器端如何接收檔案,如何把特定訊息往前端送? 這個我們待會下面介紹,先看看該套件需要引用的css與js:Click the image to open in full size.
上圖是所有你需要引用的檔案,基本只有四個,如果你需要更多的功能(例如檔案排序…),則可能需要引用更多,其中1,3是與CSS相關,2是核心的js,4則是多國語言(中文需要的js)。 撰寫伺服器端接收檔案的C#程式碼

前端的code非常簡單,接著我們就要來看看後端接收檔案的程式碼如何撰寫。這個套件基本上走非常標準的http post把檔案往後端送,如果你採用非同步檔案上傳,則檔案是被一個一個往後端送的,也就是說,如果你上傳五個檔案,後端接收檔案的API會被呼叫五次。



本篇來源...

回覆時引用此篇文章
回覆

主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 10:41 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2017,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2