如何实现多文件上传与进度显示-AngularJS上传文件示例代码

AngularJS 作为一款经典的前端框架，在文件上传功能实现上提供了灵活的解决方案，通过结合模块指令和原生 JavaScript 的 FileReader API，开发者可以轻松构建交互式文件上传模块，以下将从基础实现、进阶优化、错误处理等多个维度，详细解析 AngularJS 文件上传的示例代码与核心逻辑。

基础文件上传实现

AngularJS 文件上传的核心在于利用指令双向绑定文件数据，并通过或触发上传逻辑,以下是一个基础单文件上传的完整示例：

type="file" ng-model="file" required>上传
{{uploadStatus}}

对应的控制器代码如下：

angular.module('fileUploadApp', []).controller('UploadController', ['$scope', '$http', function($scope, $http) {$scope.submitFile = function() {var formData = new FormData();formData.append('file', $scope.file);$http.post('/api/upload', formData, {transformRequest: angular.identity,Headers: {'Content-Type': undefined}}).success(function(response) {$scope.uploadStatus = '上传成功：' + response.filename;}).error(function(error) {$scope.uploadStatus = '上传失败：' + error.message;});};}]);

关键点解析 ：

多文件上传与进度显示

实际应用中常需支持多文件上传并显示上传进度，可通过属性和指令扩展功能：

控制器中处理多文件逻辑：

$scope.getFiles = function(fileList) {$scope.files = fileList;};$scope.uploadMultiple = function() {var formData = new FormData();for (var i = 0; i < $scope.files.length; i++) {formData.append('files', $scope.files[i]);}$http.post('/api/uploadMultiple', formData, {uploadEventHandlers: {progress: function(event) {$scope.progress = Math.round(event.loaded / event.total * 100);}},transformRequest: angular.identity,headers: {'Content-Type': undefined}}).success(function(response) {$scope.uploadStatus = '成功上传 ' + response.length + ' 个文件';});};

进度条实现 ：可通过 HTML5 的元素直观展示上传进度：

{{progress}}%

文件类型与大小验证

前端验证能有效减少无效请求，通过 ng-pattern 和自定义指令实现校验：

仅支持图片和PDF文件

在控制器中添加大小验证：

$scope.$watch('file', function(newFile) {if (newFile && newFile.size > 5 * 1024 * 1024) { // 5MB限制$scope.fileSizeError = '文件大小不能超过5MB';$scope.file = null;} else {$scope.fileSizeError = '';}});

服务端配置注意事项

虽然本文聚焦前端实现，但服务端配置同样关键，以 Node.js Express 为例：

const multer = require('multer');const upload = multer({ dest: 'uploads/' });app.post('/api/upload', upload.single('file'), (req, res) => {res.json({ filename: req.file.filename });});app.post('/api/uploadMultiple', upload.array('files', 5), (req, res) => {res.json(req.files.map(f => f.filename));});

常见问题与解决方案

完整优化示例

结合上述所有要素,以下是完整的优化版实现：

选择文件（支持多选，最大5MB，类型：jpg/png/pdf）
请选择文件{{fileErrors}}
{{progress}}%
{{isUploading ? '上传中...' : '开始上传'}}
{{uploadSuccess}}

控制器代码：

angular.module('uploadApp', []).controller('UploadCtrl', ['$scope', '$http', function($scope, $http) {$scope.isUploading = false;$scope.progress = 0;$scope.fileErrors = '';$scope.validateFiles = function() {$scope.fileErrors = '';if (!$scope.selectedFiles) return;for (var i = 0; i < $scope.selectedFiles.length; i++) {var file = $scope.selectedFiles[i];if (file.size > 5 * 1024 * 1024) {$scope.fileErrors = '文件 ' + file.name + ' 超过5MB限制';$scope.selectedFiles = null;return;}}};$scope.uploadFiles = function() {$scope.isUploading = true;$scope.progress = 0;$scope.uploadSuccess = '';var formData = new FormData();for (var i = 0; i < $scope.selectedFiles.length; i++) {formData.append('files', $scope.selectedFiles[i]);}$http.post('/api/upload', formData, {uploadEventHandlers: {progress: function(e) {$scope.progress = Math.round(e.loaded / e.total * 100);$scope.$apply();}},transformRequest: angular.identity,headers: {'Content-Type': undefined}}).success(function(response) {$scope.uploadSuccess = '成功上传 ' + response.length + ' 个文件';}).error(function(error) {$scope.fileErrors = '上传失败：' + error.message;}).finally(function() {$scope.isUploading = false;});};}]);

通过以上代码实现了一个功能完善、交互友好的 AngularJS 文件上传模块，涵盖了基础上传、多文件处理、进度显示、前端验证等核心功能，并提供了清晰的错误反馈机制，开发者可根据实际需求进一步扩展功能，如添加文件预览、断点续传等高级特性。