Question

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

如果是zip文件，请提交。
如果它不是zip文件，则会出现＆＃34;不是zip文件。＆＃34;并且文件无法上传。

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中的指令或控制器。

Answer 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    
    }

以上代码在您选择文件时验证文件类型。请从我的答案中取一把钥匙。

Answer 2

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

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

希望这会起作用

Answer 3

要验证文件扩展名，您可以创建Angular指令＆amp;在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/>

submit function =＆gt;

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

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

3 个答案: