asp.net Web開發框架 (8) - 使用krajee進行非同步檔案上傳

作者： -

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

檔案上傳範例

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

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

如何使用

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

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<!-- the main fileinput plugin file -->
<script src="Content/bootstrap-fileinput/fileinput.min.js"></script>
<!-- bootstrap.js below is needed if you wish to zoom and view file content
in a larger detailed modal dialog -->
<script src="Scripts/bootstrap.min.js"></script>
<!-- optionally if you need a theme like font awesome theme you can include
it as mentioned below -->
<script src="Content/bootstrap-fileinput/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include
locale file as mentioned below -->
<script src="Content/bootstrap-fileinput/locales/zh-TW.js"></script>
<script>
//上傳檔案完成後
function fileuploaded(event, data, id, index) {
//alert(index + ',' + data.files[index].name + ',' + data.response.URL);
$('#list').append('<li><a href="' + data.response.URL + '" target=_blank><span>' + data.files[index].name + '</span></a></li>');
}
//上傳前
function filepreupload() {
//清空list
$('#list').empty();
}
function setupFileUploadBox() {
//setup file upload
$("#input-id").fileinput(
{
language: 'zh-TW', //支援中文
showUpload: true,
previewFileType: 'any',
uploadAsync: true,
maxFileCount: 5,
uploadUrl: 'ReceieveFile.aspx'
}
).on('fileuploaded', fileuploaded).on('filepreupload', filepreupload);
}
</script>
</head>
<body>
<div class="row" style="margin: 12px">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
範例 : 非同步上傳檔案
</div>
<div class="panel-body">
<input id="input-id" name="input-id[]" type="file" class="file" multiple data-show-preview="true" data-preview-file-type="text">
</div>
</div>
</div>
<div class="col-lg-6">
<h1>上傳檔案</h1>
<ol id="list"></ol>
</div>
</div>
<script>
//setup
setupFileUploadBox();
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
我們先看55行的部分，這是定義一個Input標記，其中的multiple意味著支援多檔上傳，data-show-preview="true"則是支援顯示預覽視窗。當然這些設定都可以在後面透過js來更動。

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

比較重要的是uploadUrl，這個參數指定了非同步檔案上傳的接收位置，由於這個範例採用WebForms，因此我們指定ReceieveFile.aspx，這部分我們待會後面介紹。(我覺得熟悉WebAPI的開發人員可以輕易的把ReceieveFile.aspx這隻改成WebAPI，因此我暫時就不動手改了)

先看上面程式碼43行的on後面定義的幾個事件hook:

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

我們在fileuploaded這段程式碼當中，也只是把上傳完成之後，伺服器端傳來的檔案路徑(URL)給顯示出來而已…

伺服器端如何接收檔案，如何把特定訊息往前端送? 這個我們待會下面介紹，先看看該套件需要引用哪些css與js (我都整理在Content/bootstrap-fileinput資料夾下):
上圖是所有你需要引用的檔案，基本只有四個，如果你需要更多的功能(例如檔案排序…)，則可能需要引用更多，其中1,3是與CSS相關，2是核心的js，4則是多國語言(中文需要的js)。

撰寫伺服器端接收檔案的C#程式碼

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

後端接收檔案的API可以用WebAPI或是單純的apsx頁面撰寫，我們先看.aspx的版本:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication8
{
/// <summary>
/// 回傳物件
/// </summary>
public class customResponse
{
/// <summary>
/// 我們只回傳一個URL
/// </summary>
public string URL { get; set; }
}
public partial class ReceieveFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//配合前端需要接收pure JSON response
Response.Clear();
Response.ContentType = "application/json";
//理論上，只會有1
if (Request.Files.Count > 0)
{
try
{
//我們把上傳的檔案放到temp資料夾底下
string path = Server.MapPath("temp\\");
for (int i = 0; i < Request.Files.Count; i++)
{
//為了上傳檔案不會重複，因此檔名一率加上guid
var guid = Guid.NewGuid();
var file = Request.Files[i];
path += guid + "-" + file.FileName;
//存檔
file.SaveAs(path);
//done
var JSON = Newtonsoft.Json.JsonConvert.SerializeObject(
new customResponse { URL = "temp\\" + guid + "-" + file.FileName });
//回應JSON
Response.Write(JSON);
}
}
catch (Exception ex)
{
//如果有錯誤，回應exception JSON
string jsonError = Newtonsoft.Json.JsonConvert.SerializeObject(ex);
Response.Write(jsonError);
}
//stop response
Response.End();
}
else
{
//如果別人亂入
string jsonError = Newtonsoft.Json.JsonConvert.SerializeObject(new Exception("No Any Files."));
Response.Write(jsonError);
Response.End();
}
}
}
}
view raw ReceieveFile.aspx.cs hosted with ❤ by GitHub
你會發現這其實是一個很簡單的WebForm aspx，我們可以在PageLoad當中透過Request.Files接收到檔案，沒什麼特別的。這個範例刻意用aspx來撰寫，其實當然也可以用WebAPI，但在行為上其實都一樣。

由於多檔上傳時，前端的套件是把檔案一次一個往後端送，因此如果你同時上傳五個檔案，其實這個 ReceieveFile.aspx.cs 的Page_Load會被呼叫五次，因此，其實理論上 Request.Files.Count 在正常狀況下只會是1。

後面36-41行就是把取得的檔案儲存。然後43-46行回應一個很標準的JSON給前端。

這邊請特別留意，該套件要求，你撰寫的接收檔案的API(嚴格說起來不該稱之為API，應該叫做Backend Service)，必須回應JSON，即便你啥也不想傳給前端，都必須回應一個空的{ }。

你會看到我們new了一個13-19行定義的customResponse物件，其實裡面也只有一個URL屬性，你可以自己加上其他的屬性，如果需要的話。不過最少，也應該回應一個檔案上傳到後端之後的id或URL，範例中我們選擇回應URL，因此你會看到我們在44行組出被上傳檔案的URL，然後在46行回傳給前端。

就這樣，其他的code全是例外處理。

整個範例的source code在: https://github.com/isdaviddong/KrajeeFileUploadExample
該套件的官網: http://plugins.krajee.com/file-input

整個套件採BSD 3-Clause License，這年頭好心人真多…
--------------------------------------------
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。

留言

張貼留言

這個網誌中的熱門文章

使用LM Studio輕鬆在本地端以API呼叫大語言模型(LLM)

作者： -
圖片
最近上課常被問到，如何在地端環境搭建出大語言模型(LLM)，並且呼叫其API。 一開始我不太理解為何會有這樣的需求(因為在地端自行搭建運行LLM的成本不一定比較低，即便可能比較安全)，但被問多了，也就開始遍尋相關的解決方案，看看有沒有什麼最簡單的方式，可以讓開發人員在地端測試大語言模型? 後來我選擇 LM Studio ，它就是一款設計來運行大型語言模型（LLM）的平台，有個算是挺優雅的整合環境，讓一般 end-user 或開發人員，都可以輕易地在 local 端進行模型的部署和測試。 LM Studio 本身支援多種模型架構和框架，當然，最重要的是，它是免費的。 下載安裝 都很容易，我就不多說。 安裝好之後，你可以看到首頁中已經呈現了許多 Hugging Face上的模型： 這顯然是因為Hugging Face是大部分免費開源模型的集散地。 你可以搜尋自己喜歡的模型，透過LM Studio下載到local之後，就可以直接載入(下圖一)： 隨手設定一下 system prompt(上圖二)，然後，就可以直接對談了。(上圖三) LM Studio會使用你的GPU進行運算(如果有的話)，你會發現，原來有好的設備(GPU)，運行的速度可以如此之快。 Local Server 對於開發人員來說，它還有個超級更友善的功能。 LM Studio本身還提供一個 local server，可以幫你把模型包裹起來讓你直接透過API呼叫該模型的功能，例如： 上圖是我們開啟 LM Studio中 Local Server功能後的結果，你可以透過 localhost 的 1234 port 來呼叫這個被 LM Studio 運行起來的大語言模型。(有沒有發現，我們用的也是 chat/completions API) 透過Postman簡單提供一下 JSON Body: { "model": "LM Studio Community/Meta-Llama-3-8B-Instruct-GGUF", "messages": [ { "role": "system", "content": "你是AI助理，請一律用繁體中...
Read more »

實際嘗試使用DeepSeek API

作者： -
圖片
突然造成關注的 DeepSeek DeepSeek 是一家於2023年由中國私募基金「幻方量化」創立的人工智慧公司，專注於AI技術。算是少數專注於基底模型訓練的廠商。幻方量化這家公司的負責人很年輕，1985年生，才40歲，同時也是DeepSeek的創辦人。但他為何從投資領域跑來訓練AI模型? 如果對這家企業有興趣，可以參考 這裡 。) 從沒沒無聞到震動市場，主要是因為其最新成果 DeepSeek-V3 與 R1模型，採用「混合專家架構」設計，僅在需要時啟動部分「腦細胞」，以便於降低運算資源消耗。據傳，由於訓練該模型僅使用 2048 部 NVIDIA H800 GPU，耗時約兩個月，以極低的成本(約為560萬美元)完成訓練，但 R1 模型在數學和推理基準測試中表現出色，號稱與OpenAI的o1模型效果相當。 據聞 Meta 和 OpenAI 對 DeepSeek 的快速崛起感到緊張，主要原因在於 DeepSeek 在各種壓力底下，居然可以更低的成本，基於過去開源的基礎完成更高階的成果展現。Meta的首席AI科學家Yann LeCun指出，DeepSeek的成功證明了開源模型(例如他們家的llama)正在超越專有模型(像是 GPT or Gemini)，強調了開放研究與開源的重要性。 總之這些進展引起了矽谷的關注，甚至有Meta員工匿名表示，內部出現了恐慌情緒，工程師們正在連夜嘗試複製DeepSeek的技術。 可預見的未來，模型(不管是雲端或地端)的可選擇性將會大增，在使用的成本上也有機會日漸低廉。因此，我們就來看看 DeepSeek API 的使用。 使用 DeepSeek API DeepSeek 也有提供雲端版本的API，要使用 DeepSeek 的 API，您需要先申請 API 金鑰(以信用卡或PayPal付費)，位於 這裡 : 申請後，您可以透過發送 HTTP POST 請求與 DeepSeek 的模型進行互動。以下是使用 cURL 的範例： curl https://api.deepseek.com/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer <DeepSeek API Key...
Read more »

使用 Dify 以No Code方式建立記帳機器人

作者： -
圖片
LLM改變了軟體開發的一切 每每碰到一套新的工具或技術，我都會想把過去熟悉的例子重新實作一次，一方面有助於了解新技術的瓶頸或極限，另一方面也可以實際體驗新工具所能帶來的改變與節省的時間。針對LLM和Dify的出現，我當然也這麼做了。 過去，我們曾經出版過一本『LINE Bot與人工智慧辨識開發實戰』的書籍，內容在闡述使用LINE官方帳號和微軟的AI技術(cognitive services)進行 對談/客服 機器人的建立。當然，那是在還沒有LLM的時代。 如今LLM的出現，改變了開發對談機器人的一切。 過去書中有一個例子，我一直想拿LLM重新做一次，就是 記帳機器人 。 而且這一次，我不想再寫任何程式碼了。 記帳機器人 記帳是獲得財富自由的首要關鍵(不知道曾看到哪本書上這樣說的，但我愈來愈覺得那本書裡面的內容有一半是安慰人的，不過我們暫且擱置爭議)。關於記帳這件事情，如果能有一個隨身帳本，可以幫你記錄每一筆消費，應該是一個好的開始。 有很多app有這樣的功能，但大多數App都是透過表單輸入的方式，讓你自己輸入每一個欄位，而我希望做的這個對談機器人，要能夠直接透過自然語言輸入，就能完成記帳。例如： 剛才在加油站把油加滿，花了1200元 午餐吃了7-11的雞腿便當，130塊 用戶直接用自然語言輸入類似上面這樣的句子，記帳機器人就能夠幫我們將這些消費紀錄寫入資料庫。that’s it。 使用 Dify 開發與測試 如今，在有LLM和Dify工具的狀況下，要實現這個需求變的很容易，我們先整理一下需求，並且整理一下初步的思路。 當用戶輸入一句話，我們就丟給LLM去判斷(注意，是判斷)，如果用戶在這一句話中已經包含我們所需要的所有資訊(參考底下)： 金額(Amount) 商店名稱(Store) 消費項目(Item) 時間日期(DateTime) 備註(Memo) 我們就把上述消費資料轉成 JSON，然後呼叫一個 Rest API 把這消費紀錄存入資料庫。如果用戶只說了一部份，還有缺少的資料，例如： 剛才花了150元 這句話缺了消費項目與商店名稱等資訊，那我們就讓LLM持續追問，直到蒐集完所有資訊為止。 上述邏輯很簡單，而我們用Dify進行開發，過程更簡單，整個流程設計大概像是底下這樣，幾乎不用寫什麼程式碼: 上圖中的重要...
Read more »

使用 Dify API 快速建立一個包含前後文記憶的對談機器人

作者： -
圖片
Dify 這個產品我就暫時先不介紹了，它找到了一個挺好的切入點跨入AI Agent市場。讓不喜歡(或不擅長)寫太多 Code 的開發人員，也可以快速的建立一個具有前後文、記憶的對談機器人。 其實若單就設計 Chat Bot 來談，它本質上和 GPTs 有那麼一點點像，你只需要給一個 system prompt ，再加上一點點的資料上傳做為 RAG 的數據來源，就可以生出一隻有模有樣的對談機器人。 但 GPTs 做出來的 Chat Bot 被綁在 ChatGPT 的 UI 裡面，你不容易把它跟 LINE Bot (LINE 官方帳號) 或其它 UI (例如 MS Teams) 串在一起，而 Dify 呢? 則給你了一個 chat-messages API，讓你能很快的實現這個功能，把你在 Dify 平台上做好的 Chat Bot 轉變成可以正式運行的 LINE Bot 或 其它 Bot。 這也是今天我們要介紹的部分。 建立 Assistant 我們先用 Dify 以底下這個 system prompt 建立了一個請假助理： 發佈後，你可以在Dify 內建的 Web UI 上測試： 你會發現，這個 chat bot 已經有著基本的記憶，然後可以依照 system prompt 完成對談和任務。 不要問我在這邊建立出一個假單有什麼用，正常情況下是要直接讓 chat bot 寫入資料庫(例如 HR 系統，直接完成請假)，只是我們還沒談到這一段，這部分以後再展開來談。 chat-messages API 好，透過上面那樣建立一個對談機器人超容易，且內建就有了記憶和前後文的功能。讓開發人員快樂的不得了。跟使用無腦 GPTs 生成術差不多。然而，如果只能在 Web 上用，不能串接 MS Teams、LINE…等介面，做了也是白搭。 但，Dify 貼心的提供了 API，我們來試試看。先Gen個 API Key： 生成了 API key 之後，你只需要透過底下這樣的 rest api，即可進行呼叫： 你會發現，開發人員只要使用單一的這一個 https://api.dify.ai/v1/chat-messages API 即可進行對談。每次只需要透過 query 輸入用戶說的話，response 中的 answer 則是 LLM (Assist...
Read more »

使用 Dify 建立企業請假機器人

作者： -
圖片
八卦與未來 上個月，前Google執行長Eric Schmidt在史丹福有場演講，媒體關注的是八卦消息(如果你也曾關注，網路上有很多鐵定可以找到)，但我注意到的則是他提到了自己認為接下來 AI(特別是大語言模型) 可能的發展方向，包含: Large Context Window AI Agent Text-to-Action 底下這邊有這一個段落的影片： https://www.youtube.com/watch?v=zl3k1ksFZdY 為何我會關注這部分? 因為上述的三個方向，也是身為開發人員的我，過去這一年，來與LLM打交道後的感想。昨天，我在 twMVC 的研討會分享中，展示了一個其實我過去早做過了N百次的範例，就是企業的請假機器人。(唯一不同的是，這次我幾乎沒有寫任何程式碼) 場景是，員工在家裡生病了，想要透過語音或是app進行請假，你可以看底下這個運行的範例 (git圖檔會循環播放，開始是 『我好像感冒了』)： 用自然語言對談的方式，即可完成請假。 我說過，類似這樣的範例我做過很多次，用 LINE Bot 搭配 C# 做過，用MS Bot Framework 做過，前陣子也用 Semantic Kernel 框架做過，更早期，還沒有AI的時代，我也在EIP和HR系統裡做過。 但我想說的是，這 就是 Text-to-Action 的呈現，也是一個典型的 AI Agent 的例子，它讓我們透過自然語言(可以是語音或文字)，直接命令機器人(Chat Bot、AI 助理、Agent、Assistant …不管你叫它什麼…)幫你完成一件事情(請假、售票、查詢資料、做財務報表、統計圖表、寫程式…etc.)。 這是一直以來人類對電腦最底層的需求與期待。 隨著 LLM 能夠處理和記憶的 Context 愈來愈被放大，AI Agent 所能夠處理的任務就更加的不受限制。 自然語言才是最符合人類直覺的操作 順帶一提，我昨天在研討會中講了一個故事。 有天，你覺得自己需要聘請一位助理，因此上網張貼徵人啟事，沒多久，你找到了一位號稱上知天文、下知地理的高材生，來幫助你更有效率的完成工作。 他什麼都好，唯一的一個小缺點是，你不能直接對這個助理下達指令，你必須用一種只有這個助理看得懂的語法，才能要求這個助理幫你完成特定的工作。這些語法還挺...
Read more »