AngularJS中如何通过两个独立文件输入框上传文件及验证扩展名？

我来帮你搞定这两个AngularJS文件处理的问题，一步步拆解给你看：

AngularJS原生不支持直接用ng-model绑定文件输入，不过我们可以给每个输入框绑定独立的change事件，分别存储两个文件对象，之后在上传时一起提交到后端。

第一步：编写HTML结构 #

<div ng-controller="FileUploadCtrl">
  <!-- 第一个文件选择框 -->
  <input type="file" name="file1" onchange="angular.element(this).scope().selectFile(this.files, 'file1')" required />
  
  <!-- 第二个文件选择框 -->
  <input type="file" name="file2" onchange="angular.element(this).scope().selectFile(this.files, 'file2')" required />
  
  <!-- 上传按钮 -->
  <button ng-click="uploadFiles()" ng-disabled="!uploadFiles.file1 || !uploadFiles.file2">上传两个文件</button>
</div>

第二步：编写控制器逻辑 #

// 假设你的Angular模块已经定义好了，比如叫app
app.controller('FileUploadCtrl', function($scope, $http) {
  // 初始化存储两个文件的对象
  $scope.uploadFiles = {
    file1: null,
    file2: null
  };

  // 处理文件选择，通过fileKey区分两个文件
  $scope.selectFile = function(files, fileKey) {
    if (files.length > 0) {
      $scope.uploadFiles[fileKey] = files[0];
      // 手动触发Angular脏检查，因为onchange是原生事件，不在Angular上下文里
      $scope.$apply();
    }
  };

  // 执行上传操作
  $scope.uploadFiles = function() {
    // 构建FormData对象，用于携带文件
    const formData = new FormData();
    formData.append('file1', $scope.uploadFiles.file1);
    formData.append('file2', $scope.uploadFiles.file2);

    // 发送POST请求到你的上传接口
    $http({
      method: 'POST',
      url: '/your-backend-upload-url',
      data: formData,
      headers: { 'Content-Type': undefined }, // 让浏览器自动设置正确的multipart/form-data头
      transformRequest: angular.identity // 不对FormData做转换
    }).then(function(response) {
      alert('两个文件上传成功！');
      // 重置文件选择状态
      $scope.uploadFiles = { file1: null, file2: null };
    }, function(error) {
      console.error('上传失败:', error);
      alert('上传出错了，请稍后重试');
    });
  };
});

关键注意点 #

• 必须调用$scope.$apply()：因为onchange是原生DOM事件，不在Angular的自动脏检查范围内，手动调用才能更新视图。
• 上传时用FormData：这是浏览器原生对象，专门用于上传二进制文件，配合Content-Type: undefined能让浏览器自动处理请求头。

你已经有了基础的验证函数，我们可以把它整合到Angular的表单验证体系里，让错误提示更友好，同时控制按钮的可用性。

第一步：优化HTML结构（添加表单和错误提示） #

<div ng-controller="FileValidationCtrl">
  <form name="fileForm" novalidate>
    <input type="file" 
           name="uploadFile" 
           onchange="angular.element(this).scope().selectFileforUpload(this.files)" 
           required />
    
    <!-- 显示扩展名错误 -->
    <p style="color: red;" ng-show="fileForm.uploadFile.$error.invalidExtension && fileForm.uploadFile.$touched">
      只能上传PDF格式的文件哦！
    </p>
    
    <!-- 显示必填错误 -->
    <p style="color: red;" ng-show="fileForm.uploadFile.$error.required && fileForm.uploadFile.$touched">
      请先选择一个文件！
    </p>

    <button ng-click="click()" ng-disabled="fileForm.$invalid">确认上传</button>
  </form>
</div>

第二步：完善控制器的验证逻辑 #

app.controller('FileValidationCtrl', function($scope) {
  $scope.selectedFile = null;

  // 验证文件扩展名的核心函数
  $scope.verifiedFileType = function(file) {
    if (!file) return false;
    const fileName = file.name;
    // 获取文件扩展名并转小写
    const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
    // 这里可以扩展支持更多格式，比如改成['.pdf', '.docx', '.jpg']
    return extension === '.pdf';
  };

  // 处理文件选择后的验证
  $scope.selectFileforUpload = function(files) {
    if (files.length > 0) {
      $scope.selectedFile = files[0];
      // 执行验证
      const isFileTypeValid = $scope.verifiedFileType($scope.selectedFile);
      // 给表单控件设置自定义验证状态
      $scope.fileForm.uploadFile.$setValidity('invalidExtension', isFileTypeValid);
      // 触发脏检查更新视图
      $scope.$apply();
    }
  };

  $scope.click = function() {
    if ($scope.fileForm.$valid) {
      // 验证通过后，这里可以执行上传或其他业务逻辑
      alert('文件验证通过，开始处理！');
    }
  };
});

关键优化点 #

• 自定义验证状态：通过$setValidity给表单控件添加invalidExtension错误标识，配合ng-show在视图上显示错误。
• 按钮禁用：用ng-disabled="fileForm.$invalid"确保只有表单完全验证通过时，用户才能点击按钮。
• 扩展性：如果需要支持更多文件格式，只需要修改verifiedFileType函数里的判断条件即可。

内容的提问来源于stack exchange，提问作者Hoster