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

我指的是link，用于使用AngularJS创建文件上传功能。单击多次文件对话框时会多次打开AngularJS

当我点击“选择文件”，不止一次，仍然当对话框没有打开，甚至一度，选择文件，当对话开辟了第一时间之后，我仍然可以看到一个接一个地打开多个对话框。

如何解决这个问题？

让我知道它。

来源

2016-08-23 Shashank

我不确定你可以做些什么，除了自己修改源代码，并使用修改后的版本。您描述的行为可以很容易地在您链接的页面上重现。但是，真的有什么大不了的？即使窗口多次打开，也只能一次选择一个文件。 –

@JoelCDoyle，可以使用哪些修改版本？请详细说明一下。虽然，只能选择一次，但如果一次按下按钮10次，则一次又一次选择相同的文件并不是一个好主意。而且，从用户的角度来看，这不是一个好的行为。 – Shashank

您必须自己修改源代码才能获得不同的行为。这是一个很大的假设，你想要的行为甚至有可能实现。浏览器的设计可能不会对ng-file-upload进行任何修改，而这些修改会产生变化。对于这么小的东西来说，这似乎有很多工作要做。 –

这是因为你使用NG-模式在您的按钮。代替ng-model你必须编写你自己的定制指令。为了文件输入，避免使用按钮。更好的办法是使用文件输入标签，如下图所示：

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：

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

希望这将锻炼。

来源

2016-09-02 06:51:25

虽然我无法通过创建演示来复制报告的问题，但是当我将它们合并到我的应用程序中时，我仍然可以复制它。 – Shashank

@Shashank，你可以发布你的编辑代码吗？ –

我已经使用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>

来源

2016-08-27 18:24:13 trungk18

我仍然可以在您的示例中复制该问题。 – Shashank

您是否尝试过在Firefox和IE上测试过？ – trungk18

我在问题中包含的链接本身在FF中没有问题。虽然，我没有在IE中试过，但我所针对的主要浏览器是Chrome本身。如果它在Chrome中运行，这就足够了。 – Shashank

的问题似乎是与你的js file.Try及如何使用foreach循环约束，同时上传新文件，该文件将递归调用一个新的上传每次。例子：

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

请参阅本的jsfiddle：http://jsfiddle.net/danialfarid/2vq88rfs/136/

来源

2016-09-02 05:42:26 Technologeek

我正在使用单个文件本身。无论如何，这个问题仍然存在于你的演示中。 – Shashank

这不是我的ng-fileupload github官方文档的演示。 – Technologeek

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

回答

相关问题