如何在使用 AngularJS 上传之前检查文件类型？答案

【问题标题】：How to check file type before uploading with AngularJS?如何在使用 AngularJS 上传之前检查文件类型？
【发布时间】：2015-06-28 07:28:10
【问题描述】：

我想上传一个 zip 文件到服务器。在上传之前，我必须检查它是否是一个 zip 文件。

如果是 zip 文件，则提交。
如果不是 zip 文件，则会出现“不是 zip 文件”。并且文件无法上传。

HTML：

<form action="{{restUrl}}" method="post" enctype="multipart/form-data" name="myForm" novalidate>
  <input type="file" id="fileUpload" name="fileUpload">
  <p ng-show="">Not a zip file.</p>
  <input type="submit" value="Upload">
</form>

我希望它可以是 AngularJS 中的指令或控制器。

【问题讨论】：

标签： angularjs file-upload angularjs-directive upload angularjs-controller

【解决方案1】：

  Html 


<form action="{{restUrl}}" method="post" enctype="multipart/form-data" name="myForm" novalidate>
  <input type="file" id="fileUpload" onchange="angular.element(this).scope().uploadFile(this)" name="fileUpload">  
  <input type="submit" ng-click="submit()" value="Upload">
</form>

 <input type="submit" value="Upload">

JS端

  $scope.Iserror=false;
        $scope.uploadFile = function(files) {    
         $scope.Iserror=false;
        if(files[0].type!=="zip"){// check more condition with MIME type 
           alert("Not a zip file.");
           $scope.Iserror=true;
            return false;
            }       
        }; 

   $scope.uploadFile = function(files) {    
      if( $scope.Iserror==true){
         alert(""Not a zip file.");
         return false
       }
         // do submit code    
    }

当您选择文件时，上面的代码会验证文件类型。请从我的答案中取一个键。

【讨论】：

那么..<input type="file" id="" name="">怎么写？
请帮我看看，谢谢。 plnkr

【解决方案2】：

您可以在 html 中使用 input 元素的 accept 属性。查看下面的html5代码

<input type="file" id="myFile" name="myFile" accept="application/zip" file-model="myApp.myFile" />

希望这会奏效

【讨论】：

这种方法有一个潜在的缺陷。客户端的浏览器宣布文件的 MIME 类型。我有一个接受集来超越 mime 类型。当没有安装 Excel 的用户尝试上传 XLS 时，浏览器会将扩展解释为应用程序/八位字节流，因为该扩展没有定义。 Web 服务器设置为拒绝具有该 MIME 类型的文件，因此上传失败。

【解决方案3】：

要验证文件扩展名，您可以创建 Angular 指令并在 html 中使用它...

请参阅下面的代码来创建有效文件指令

{yourModuleName}.directive('validFile', function validFile($parse) {

return {
    restrict : 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {

        ngModelCtrl.$validators.validFile = function() {

            element.on('change', function () {

                var value = element.val(),
                    model = $parse(attrs.ngModel),
                    modelSetter = model.assign;

                scope.uploadedFileType = null;

                if(!value) {

                    modelSetter(scope, '');

                } else {

                    var ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();

                    if(attrs.validFile.indexOf(ext) !== -1) {

                        scope.uploadedFileType = ext;
                        modelSetter(scope, element[0].files[0]);

                    } else {

                        scope.uploadedFileType = 'other';
                        modelSetter(scope, '');
                    }
                }
            });
        };
    }
  };
});

在html下面使用

<input type="file" id="payloadFile" name="payloadFile" ng-model="cntrl.payloadFile" valid-file=".xml" required/>

提交函数 =>

uploadFile = function() {
      var file = cntrl.payloadFile;

        if(file == undefined || file == null) {

            return;

        } else if(file == '' && $scope.uploadedFileType == 'other') {
            document.getElementById('payloadFile').setCustomValidity('Supported file formats are *.xml');
       } else{
           //submit valid file here
       }
    }

查看运行代码here

【讨论】：