如何在Angular Js中使用两个不同的文件输入上传两个文件?

时间:2018-04-24 11:17:25

标签: angularjs

我正在检查文件的扩展名,使用angular js,我的html代码是:

 <input type="file" name="file"  onchange=" angular.element(this).scope().selectFileforUpload(this.files) " required/>
 <input type="button" value="Click" ng-click="click()" />

和角度控制器代码是:

$scope.verifiedFileType = function (file) {

        var fileName = file.name;
        var extension = (fileName.substring(fileName.lastIndexOf('.'), fileName.length)).toLowerCase();
        if (extension === ".pdf") {
            return true;
        }
        else {

            return false;
        }
    };


    $scope.click = function () {

        if ($scope.verifiedFileType($scope.SelectedFileForUpload)) {
            alert("Yes");
        } else {
            alert("No");
        }

    }

这很好用。但我想检查两个separete文件输入的两个文件的扩展名。我试过这个:

<input type="file" name="file"  onchange=" angular.element(this).scope().selectFileforUpload(this.files) " required/>
<input type="file" name="file2"  onchange=" angular.element(this).scope().selectFileforUpload(this.files) " required/>
<input type="button" value="Click" ng-click="click()" />


 $scope.click = function () {

        if ($scope.verifiedFileType($scope.SelectedFileForUpload[0]) && $scope.verifiedFileType($scope.SelectedFileForUpload[1])) {
            alert("Yes");
        } else {
            alert("No");
        }

    }

但是这段代码没有运行。我该如何完成这项任务?

1 个答案:

答案 0 :(得分:0)

您可以尝试使用以下指令方法来实现此目的。

<强>指令

app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var validFormats = ['jpg'];
            element.bind('change', function () {
                var values = [];
                angular.forEach(element[0].files, function (item) {
                  var fileName = item.name;
                  console.log(fileName);
                    let ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();

                    if(validFormats.indexOf(ext) == -1){
                       //Setup image upload logic here...
                    }
                });

            });
        }
    };
}]);

<强> HTML

 <body ng-controller="MainCtrl">
    <input type="file" ng-file-model="files1" multiple />
    <input type="file" ng-file-model="files" multiple />
  </body>

希望这会给你提升!