本文实例讲述了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