我正在尝试上传多个文件，允许用户上传多个文件。
第一次我可以上传文件，但是当我选择第二次时，它会出现两次，第三次时，文件名会出现三次。
这是我的代码:
<body ng-app='myApp' ng-controller='myCtrl'>
<input type="file" class="filePost" name="file" id="filePost" multiple="" ng-click='getSelectedFile()'>
<div id='files_list'>
<ul> </ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getSelectedFile = function() {
$("#filePost").change(function() {
var ele = document.getElementById('filePost');
var result = ele.files;
for (var x = 0; x < result.length; x++) {
var file = result[x];
$("#files_list ul").append(
"<li class='list_item'>" + file.name + " " + "<span
class = 'remove' > X < /span>" +"</li > "
);
}
$(document).on('click', '.remove', function() {
var span_id = $(this.parentNode).text();
$(this).closest('li').remove();
});
});
}
});
</script>
</body>
最佳答案
我在 plunker 上做了一个例子.. 希望您能理解。
Multiple uploading Files in Angular App Example
在 html 中-
<body ng-controller="myCtrl">
<p>Hello {{name}}!</p>
<input type="file" ng-file-model="files" multiple />
<button type="button" ng-click="upload()">Upload</button>
<p ng-repeat="file in files">
{{file.name}}
</p>
</body>
在js中-
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.name = 'World';
$scope.files = [];
$scope.upload=function(){
alert($scope.files.length+" files selected ... Write your Upload Code");
};
});
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function () {
var values = [];
angular.forEach(element[0].files, function (item) {
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: URL.createObjectURL(item),
// File Input Value
_file: item
};
values.push(value);
});
scope.$apply(function () {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
如果你仍然没有得到..通知我。
关于javascript - 选择多个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45944300/