angular 上传图片并显示_AngularJS实现图片上传和预览功能的方法分析

末蓝、 2023-01-08 06:27 175阅读 0赞

本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考，具体如下：

html5原生方法

先看一下html5原生方法上传和预览图片的实现：

// ![Image 1][]

var imgPreview = document.getElementById("img-preview");

//

var imgInput= document.getElementById("img-input");

imgInput.addEventListener("change", function(e)\{

var imgFile = e.target.files\[0\]; // 获取上传的图片

var reader = new FileReader();

reader.readAsDataURL(imgFile ); // 将图片转成dataUri

reader.onload = function(e) \{

imgPreview.src = e.target.result; //更新图片链接

\}

\});

我们看到，需要用到onchange事件来获得上传的文件，当项目使用上angularjs时，很自然的，我们想到了ng-change指令，然而不幸的是，在angularjs中，不支持ng-model和ng-change指令(附录1)，这就使得文件上传变得有些复杂了。

angularjs方法

1、安装 angular-file-upload 模块

bower install angular-file-upload --save

2、添加到应用依赖

var app = angular.module('my-app', \[

'angularFileUpload'

\]);

3、HTML代码

![Image 1][]

这里，nv-file-select=""表示使用angular-file-upload模块的文件选择方式上传，参考官方例子

4、controller代码

.controller('AppController', \['$scope', 'FileUploader', function($scope, FileUploader) \{

var uploader = $scope.uploader = new FileUploader(\{

url: 'upload.php' //换成自己的上传地址，本地演示不换也行

\});

uploader.onAfterAddingFile = function(fileItem) \{

var reader = new FileReader();

reader.addEventListener("load", function (e) \{

//文件加载完之后，更新angular绑定

$scope.$apply(function()\{

$scope.iconUrl = e.target.result;

\});

\}, false);

reader.readAsDataURL(fileItem.\_file);

\};

\}\]);

可以看到，我们通过onAfterAddingFile回调函数获得所选的图片文件，接下来把图片文件转成datauri，再更新![Image 1][]标签的src属性即可。

值得注意的是，我们把“更新![Image 1][]标签的src属性”这个任务放到了$scope.$apply方法中执行，这是因为在angular框架外部(如在浏览器DOM事件中, setTimeout, XHR 或者 第三方框架中)更新数据，angular是不会同步更新绑定的。这点可以参考angular $apply reference

希望本文所述对大家AngularJS程序设计有所帮助。

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 70 阅读

相关 angular 上传图片并显示_AngularJS实现图片上传和预览功能的方法分析

本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考，具体如下： html5原生方法先看一下html5原生方法上传和预览图片的实现： //

末蓝、/ 2023年01月08日 06:27/ 0 赞/ 176 阅读

相关带图片预览功能的图片上传

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

偏执的太偏执、/ 2022年07月12日 09:59/ 0 赞/ 411 阅读

相关 js实现上传图片预览的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月16日 07:11/ 0 赞/ 348 阅读

相关 Angular4 实现多图片上传预览

之前写了一个angular1x的实现，但手痒痒于是就搞了一下angular4的实现方式，不BB直接上代码了。样式里用到了fontawesome的图标首先我们直接看如何调用

谁借莪１个温暖的怀抱￠/ 2022年06月08日 12:35/ 0 赞/ 365 阅读

相关 Angularjs 实现多图片上传预览

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后

我会带着你远行/ 2022年06月08日 09:56/ 0 赞/ 382 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 528 阅读

相关 Angularjs 实现多图片上传预览

先看效果图 ![70][] 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。我们先写一

水深无声/ 2022年05月15日 12:10/ 0 赞/ 394 阅读

相关 JS实现上传图片的三种方法并实现预览图片功能

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；

爱被打了一巴掌/ 2022年05月13日 03:20/ 0 赞/ 270 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 824 阅读