Диалоговое окно файла открывается несколько раз при нажатии более одного раза AngularJS [закрыто]
Я имею в виду ссылке, для создания функциональности загрузки файлов с помощью AngularJS.
когда я нажимаю на 'Выбрать файл', более одного раза и все еще, когда диалоговое окно не открыто, даже один раз, после выбора , когда диалог открылся в первый раз, я все еще мог видеть несколько диалогов, открывающихся один за другим.
Как решить эту проблему?
Дайте мне знать об этом.
3 ответов
Это потому, что вы используете 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/>
надеюсь, это сработает.
я обновил образец из ng-file-загрузить С использованием AngularJS 1.5.1 в качестве следующего кода. Вы можете попытаться сообщить мне результат ?
//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/