自從Html5 增加file的功能後，檔案上傳的功能簡化不少，剛好有案子正好需要上傳圖片，所以可以示範如何在Angular
上傳檔案後，再經由MVC後端接收圖片的教學，最後又透過Angular的特殊功能，把多張圖片展示在列表上。
一、HTML5 的語法
瀏覽器已經將上傳檔案的功能內建化，所以讓後端處理細節簡化不少，
加上multiple 允許多個檔案上傳，預設只能單檔上傳，所以multiple 屬性要加上
|
<input type="file" name="multipleFiles" multiple />
|
二、Angular的語法
傳統的網頁是經由post把網頁內的form 資訊往server後端傳遞，但是
Ajax已經是網頁必備的功能，只將部份訊息往後端傳遞，所以angular中宣告formData變數就是要把前端的訊息集中起來，再呼叫$http.post把formData 送給asp.net MVC 的controller
Angular 有很多參數和函數，作者沒有深入研究，因為$http.post是非常方便的工具，$http 是Angular和遠端http Server 溝通的核心
|
var formData = new FormData();//傳送到後端的資訊
//上傳多張圖片
$.each($("input[name='multipleFiles']"), function (i, obj) {
$.each(obj.files, function (j, file) {
formData.append('photo[' + j + ']', file); //以陣列方式傳遞多檔圖片或檔案
})
});
$http.post(‘../Test/AddReleaseBug’, formData, {
headers: { 'Content-Type': undefined }
}).then(function (res) {
alert("儲存成功");
}));
|
三、Asp.net MVC
Asp.net MVC為了要接收來自前端的上傳的圖片，所以宣告
HttpPostedFileBase陣列的型態去接收檔案，就可以接收多個檔案，為了隔離網頁的呈現層(asp.net
mvc)和企業邏輯，所以增加實體層entityTest 負責資料DB的取得，如果網頁架構較大時，可以增加控制層，負責更細節的邏輯控制，再由控制層再呼叫實體層，這就是早期的三層式架構(MVC)模式。
Asp.net Controller
|
[HttpPost]
public async Task<bool> AddReleaseBug( IEnumerable<HttpPostedFileBase>[] photo)
{
string path = "bugFile";
string strMultiFiles = "";
if (photo != null)
{
foreach (IEnumerable<HttpPostedFileBase> uploadImage in photo)
{
strMultiFiles += await entityTestObj.fileUpload(uploadImage, path) + ",";
}
strMultiFiles
= strMultiFiles.Substring(0, strMultiFiles.Length - 1);
}
}
|
實體層:
FileUpload 負責把檔案儲存到指定的路徑中，並把檔名回傳
|
public async Task<string> fileUpload(IEnumerable<HttpPostedFileBase>
addDownloadFile, string path)
{
try
{
var fileName = "";
var httpPath = HttpContext.Current.Server.MapPath("~/" + path);
Directory.CreateDirectory(httpPath); //路徑不存在自已建立
if (addDownloadFile.Count() > 0)
{
foreach (HttpPostedFileBase file in addDownloadFile)
{
fileName
+= Path.GetFileName(file.FileName)
+ ",";
var pathFileName = Path.Combine(httpPath, file.FileName);
file.SaveAs(pathFileName);
}
fileName =
fileName.Substring(0, fileName.Length - 1);
}
return fileName;
}
catch (Exception ex)
{
writeObj.writeToFile("ManageFileVersion_" + DateTime.Now.ToString("yyyyMMdd"), HttpContext.Current.Server.MapPath("~"), "fileUpload error: " + ex.Message);
throw new Exception(ex.Message);
}
}
|
示範: photo陣列集中共有3個檔案上傳
四、Angular如何split(“,”)
有點偏離主題，因為延續多檔上傳的功能，我將多檔案名稱儲存在同一欄位
中，並以『，』隔離，所以如果要在前端呈現多個圖片時，要以逗號隔離，但是Angular 有支援split的功能，所以這是一個好用的工具喔。
|
<font color="blue">圖片</font>:<br />
<a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[0] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[0] }}</a>
<a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[1] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[1] }}</a>
<a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[2] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[2] }}</a>
<a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[3] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[3] }}</a>
<a href="~/bugFile/{{::bug.bugDocumentFile.split(',')[4] }}" arget="_blank">{{::bug.bugDocumentFile.split(',')[4] }}</a>
|
如果以上有更好的建議的話，歡迎多多留言，希望在這共同的平台上面，大
家可以共同教學相長。
五、文獻參考
1.
https://docs.angularjs.org/api/ng/service/$http
