您的位置:首页 > Web前端 > AngularJS

AngularJS+FileReader实现图片上传

2017-03-15 09:16 239 查看
需求:实现一个图片上传并显示缩略图的功能,如下图所示:



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

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" onchange="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);

};


望多指教,谢谢:)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: