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

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

html5原生方法

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

//

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-uploa