Как проверить тип файла перед загрузкой с помощью AngularJS?

Question

Я хочу загрузить 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.

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  
    } 

Это выше код проверки типа файла, когда вы выбирая file.Please взять ключ от моего ответа.

Answer 2

Вы можете использовать принять атрибут элемента ввода в html. Проверьте ниже html5 код

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

Надеется, что это будет работать

Answer 3

Для проверки расширения файла вы можете создать Угловую директива & использовать его в 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