当多次点击文件对话框时,会打开多次
File dialog opens up multiple times when clicked more than once AngularJS
我指的是链接,用于使用AngularJS创建文件上传功能。
当我多次点击"选择文件",当对话框没有打开时,即使只有一次,在选择文件后,当对话框第一次打开时,我仍然可以看到多个对话框一个接一个地打开。
如何解决这个问题?
让我知道。
我使用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>
问题似乎是与您的Js文件。尝试在上传新文件时使用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/
这是因为您在按钮中使用了ng-model。而不是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/>
相关文章:
- 如何设置浏览器打开的文件对话框的文件名(一些默认值)
- 如何为使用 JSP 生成的下载文件显示“保存文件”对话框
- 如何在jquery/JavaScript中打开浏览文件对话框时执行取消事件
- 单击页面中的任何按钮时,使用Jquery file Upload时都会打开文件对话框
- 如何在Safari中显示保存文件对话框
- 如何在javascript中将事件添加到浏览器的“保存文件”对话框中
- 单击输入框以显示“打开文件”对话框,但不单击“选择文件”按钮
- IPython 笔记本打开文件对话框(检索完整路径)
- 将文件从客户端上传到服务器,而无需打开“文件”对话框
- 通过 ESC 关闭文件对话框,该模式也通过 ESC 关闭
- 如何在没有文件对话框的情况下通过javascript/ajax从url发布图像
- 如何检测是否从文件对话框中选择了文件
- 在“下载文件”对话框中添加一个选项
- 在没有file输入的情况下打开文件对话框
- "在文件对话框中取消“;事件
- “打开文件”对话框未打开
- 按钮显示“选择要上载的文件”对话框
- 从 JavaScript 打开文件对话框,此处不起作用
- 打开"选择文件"对话框,点击凸起按钮材质界面
- JavaScript文件对话框*没有* <输入>