前端之家收集整理的这篇文章主要介绍了
angularjs – 使用Angular JS进行文件选择,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
404_0@
我想用AngularJS拿起一个
文件:
HTML:
<div ng-controller="TopMenuCtrl">
<button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<input type="file" ng-model="filepick" ng-change="pickimg()" multiple />
<output id="list"></output>
</div>
JavaScript的:
angular.module('plunker',['ui.bootstrap']);
function TopMenuCtrl($scope) {
$scope.pickimg = function() {
alert('a');
};
}
如何在AngularJS pickimg函数上绑定输入文件onchange操作?
而且如何操作上传的文件?
Angular
不支持输入[type = file]的更改,因此您必须自己滚动更改实现。
首先,在HTML中,定义Javascript for forchange,如下所示:
<input ng-model="photo"
onchange="angular.element(this).scope().file_changed(this)"
type="file" accept="image/*" />
然后在您的角度控制器代码中,定义函数:
$scope.file_changed = function(element) {
$scope.$apply(function(scope) {
var photofile = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
// handle onload
};
reader.readAsDataURL(photofile);
});
};