当多次单击AngularJS时，文件对话框会多次打开

I am referring to the link, for creating a file-upload functionality using AngularJS.

我指的是使用AngularJS创建文件上传功能的链接。

When I click on the 'Choose file', more than once and still when the dialog isn't open, even once, after selecting the file, when the dialog has opened up for the first-time, I could still see the multiple dialog opening up one after the other.

当我单击“选择文件”时，不止一次，当对话框未打开时，甚至一次，在选择文件后，当对话框第一次打开时，我仍然可以看到多个对话框一个接一个地开放。

How to solve this issue?

如何解决这个问题？

Let me know about it.

让我知道。

3 个解决方案

#1

This is because you are using ng-model in your button. Instead of ng-model you have to write your own custom directive. For file input avoid using a button. The better way is to use a file input tag as shown below:

这是因为您在按钮中使用ng-model。您必须编写自己的自定义指令，而不是ng-model。对于文件输入，请避免使用按钮。更好的方法是使用文件输入标记，如下所示：

Angularjs:

Angularjs：

    myApp.directive('fileModel', ['$parse', function ($parse) { 
    return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;
        element.bind('change', function () {
            scope.$apply(function () {
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
    }
    }]);

HTML:

HTML：

    <input id="chooseFile" type="file" file-model="file" name="Attachment" multiple/>

Hopefully, this will work out.

希望这会成功。

#2

I have updated a sample from ng-file-upload with using AngularJS 1.5.1 as the following code. Can you try and let me know the result ?

我使用AngularJS 1.5.1更新了ng-file-upload中的示例，如下面的代码所示。你可以尝试让我知道结果吗？

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadPic = function(file) {
    file.upload = Upload.upload({
      url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
      data: {username: $scope.username, file: file},
    });

    file.upload.then(function (response) {
      $timeout(function () {
        file.result = response.data;
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
      // Math.min is to fix IE which reports 200% sometimes
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
    }
}]);

.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}

form .progress {
    line-height: 15px;
}
}

.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}

.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.min.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>



<body ng-app="fileUpload" ng-controller="MyCtrl">
  <form name="myForm">
    <fieldset>
      <legend>Upload on form submit</legend>
      Username:
      <input type="text" name="userName" ng-model="username" size="31" required>
      <i ng-show="myForm.userName.$error.required">*required</i>
      <br>Photo:
      <input type="file" ngf-select ng-model="picFile" name="file"    
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFile">
      <i ng-show="myForm.file.$error.required">*required</i><br>
      <i ng-show="myForm.file.$error.maxSize">File too large 
          {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
      <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
      <br>
      <button ng-disabled="!myForm.$valid" 
              ng-click="uploadPic(picFile)">Submit</button>
      <span class="progress" ng-show="picFile.progress >= 0">
        <div style="width:{{picFile.progress}}%" 
            ng-bind="picFile.progress + '%'"></div>
      </span>
      <span ng-show="picFile.result">Upload Successful</span>
      <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </fieldset>
    <br>
  </form>
</body>

#3

The problem seems to be with your Js file.Try using forEach looping constraint while uploading a new file which would recursively be called every time on a new upload. Example :

问题似乎与您的Js文件有关。尝试在上传新文件时使用forEach循环约束，每次在新上传时都会以递归方式调用该文件。示例：

    angular.forEach(files, function(file) {
        file.upload = Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            data: {file: file}
        });`

Please refer to this JsFiddle :http://jsfiddle.net/danialfarid/2vq88rfs/136/

请参考这个JsFiddle：http：//jsfiddle.net/danialfarid/2vq88rfs/136/

#1