700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > AngularJS+FileReader实现图片上传

AngularJS+FileReader实现图片上传

时间:2023-09-07 22:16:03

相关推荐

AngularJS+FileReader实现图片上传

需求:实现一个图片上传并显示缩略图的功能,如下图所示:

限制:一次只能上传一个图片,每上传一个显示一个。

HTML

<div class="form-group"><label for="test" class="col-xs-3 control-label required-field">Please select file: </label> <div class="col-xs-9"><input type="file" id="input" accept="image/*" file-model="images" οnchange="angular.element(this).scope().upload(this.files)"/></div><label class="col-xs-3" >Selected files:</label> <div class="col-xs-9"> <span ng-repeat="item in pictures" ><img ng-src="{{item.imgSrc}}" style="max-width:100px;max-height:100px;margin:0 auto;display:inline-block;" /></span></div> </div>

JS

$scope.reader = new FileReader();$scope.pictures = {};var data = new FormData();//used for saving picture information$scope.upload = function(files) { $scope.id = (new Date()).valueOf();$scope.reader.readAsDataURL(files[0]);$scope.reader.onload = function(ev) {$scope.$apply(function(){$scope.thumb[$scope.id] = {imgSrc : ev.target.result,}});};data.append('image', files[0]);data.append('id',$scope.id);};

望多指教,谢谢:)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。