AngularJS+FileReader实现图片上传

本文介绍如何使用AngularJS和FileReader实现图片上传功能,每次上传一个图片并即时显示缩略图。用户界面友好,适合单图上传场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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




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

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);

};

望多指教,谢谢:)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值