AngularJS - 上傳檔案：初學者指南

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 和檔案上傳的世界。別擔心如果你從未寫過一行代碼——我將成為你的友好導遊，我們會一步步進行。在本教程結束時，你將對你能夠實現的成就感到驚奇！

AngularJS - Upload File

AngularJS 是什麼？

在我們深入研究檔案上傳之前，讓我們花一會兒時間了解 AngularJS 是什麼。想像你正在建造一個房子。HTML 剛好是基礎和牆壁，CSS 剛好是油漆和裝飾，那麼 AngularJS 呢？這就像是智能房屋系統，讓一切變得互動和動態。

AngularJS 是一個強大的 JavaScript 框架，它幫助我們創建響應式和互動式的網頁應用程序。這就像是有了一個超級聰明的助手，幫助你組織和管理你的網頁。

为什么要上傳檔案？

現在你可能會想，"我們為什麼需要在網頁應用程序中上傳檔案？" 好問題！想想你有多少次在社交媒體上分享照片，將履歷附加到工作申請，或將文件上傳到雲存儲服務。所有這些行為都涉及檔案上傳。

在我們日益數位化的世界中，處理檔案上傳的能力對任何網頁開發者來說都是一項關鍵技能。它讓用戶能夠通過你的網頁應用程序分享信息、媒體和文件。

建立我們的專案

讓我們開始建立一個簡單的 AngularJS 專案。別擔心，我會帶你走過每一步！

步驟 1：創建 HTML 構架

首先，我們將創建一個基本的 HTML 檔案。這將是我們應用程序的骨架。

<!DOCTYPE html>
<html ng-app="fileUploadApp">
<head>
<title>AngularJS 檔案上傳</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="fileUploadController">
<h1>AngularJS 檔案上傳範例</h1>
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">上傳</button>
</body>
</html>

讓我們分解一下：

ng-app="fileUploadApp" 告訴 AngularJS 這是我們應用的根元素。
ng-controller="fileUploadController" 指定哪個控制器應該處理這部分應用的邏輯。
我們有一個類型為 "file" 的輸入字段和一個按鈕來觸發上傳。

步驟 2：創建 AngularJS 應用程序

現在，讓我們創建我們的 app.js 檔案：

var app = angular.module('fileUploadApp', []);

app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;

element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);

app.service('fileUploadService', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log("檔案上傳成功！");
})
.error(function(){
console.log("上傳檔案時發生錯誤。");
});
}
}]);

app.controller('fileUploadController', ['$scope', 'fileUploadService', function($scope, fileUploadService){
$scope.uploadFile = function(){
var file = $scope.myFile;
var uploadUrl = "/fileUpload";
fileUploadService.uploadFileToUrl(file, uploadUrl);
};
}]);

哇，這可是很多代碼！別慌張——讓我們一塊塊分解：

我們創建了一個叫做 fileUploadApp 的 AngularJS 模塊。
我們定義了一個自定義指令 fileModel 來處理檔案輸入。
我們創建了一個服務 fileUploadService 來處理實際的檔案上傳過程。
最後，我們設定了一個控制器 fileUploadController 來把所有東西串聯起來。

了解檔案上傳過程

現在我們已經設置好了代碼，讓我們了解在 AngularJS 中檔案上傳過程是如何工作的：

當用戶選擇一個檔案時，我們的 fileModel 指令會捕捉這個動作並更新 $scope.myFile 變量。
當用戶點擊 "上傳" 按鈕時，它會觸發我們控制器中的 uploadFile() 函數。
這個函數調用我們 fileUploadService 中的 uploadFileToUrl() 方法。
服務創建了一個 FormData 物件，將檔案添加到其中，並使用 HTTP POST 請求發送到服務器。

檔案處理的常用方法

讓我們看看一些在 AngularJS 中用於檔案處理的常用方法：

方法	描述
`element.bind('change', function(){...})`	監聽檔案輸入的變化
`$scope.$apply(function(){...})`	將變化應用到作用域
`new FormData()`	創建一個新的 FormData 物件來發送檔案
`fd.append('file', file)`	將檔案添加到 FormData 物件
`$http.post(url, data, config)`	發送一個 HTTP POST 請求

最佳實踐和建議

檔案大小限制：在上傳前總是檢查檔案大小。你不希望你的服務器被巨大的檔案壓垮！
檔案類型限制：實現檔案類型檢查，確保用戶只上傳允許的檔案類型。
進度指示器：對於較大的檔案，考慮添加一個進度條，在上傳過程中給用戶反饋。
錯誤處理：總是包含正確的錯誤處理，以通知用戶在上傳過程中是否出現問題。
安全性：記住，檔案上傳可能會有安全風險。總是在服務器端驗證和清潔上傳的檔案。

結論

恭喜你！你剛剛學會了 AngularJS 檔案上傳的基本知識。記住，就像學習任何新技能一樣，熟能生巧。嘗試修改代碼，添加新功能，甚至建立一個完整的檔案管理系統！

當我們結束時，我會想起我第一次編程課，一個學生意外地上傳了他們的購物清單而不是作業。這正好顯示，無論是在編程還是其他地方，我們都從某個地方開始！持續練習，保持好奇心，在你意識到之前，你將會建立出令人驚奇的網頁應用程序。

未來的開發者們，快樂編程！

Credits: Image by storyset