AngularJS+FileReader实现图片上传

最新推荐文章于 2023-12-04 15:28:24 发布

QQ天天向上

最新推荐文章于 2023-12-04 15:28:24 发布

阅读量840

点赞数

分类专栏： GUI

本文链接：https://blog.csdn.net/Qing_AG_Li/article/details/62215233

版权

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

摘要由CSDN通过智能技术生成

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

限制：一次只能上传一个图片，每上传一个显示一个。

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