介绍
小编给大家分享一下AngularJS怎么实现图片上传和预览功能的方法分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
js的作用是什么 1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于节点。js技术进行服务器端编程。
<强> html5原生方法
先看一下html5原生方法上传和预览图片的实现:
//, & lt; img id=癷mg-preview"比;
var imgPreview =, . getelementbyid (“img-preview");//,& lt; input id=癷mg-input",类型=癴ile"比;
var imgInput=, . getelementbyid (“img-input");
imgInput.addEventListener (“change",,函数(e) {
,var imgFile =, e.target.files[0];,//,获取上传的图片
,var reader =, new FileReader ();
,reader.readAsDataURL (imgFile );,//,将图片转成dataUri=,reader.onload 函数(e), {
时间=imgPreview.src 才能;e.target.result;,//更新图片链接
,}
}); 我们看的到,需要用到onchange事件来获得上传的文件,当项目使用上angularjs时,很自然的,我们想到了ng-change指令,然而不幸的是,在angularjs中,& lt;输入类型=癴ile"在不支持ng-model和ng-change指令(附录1),这就使得文件上传变得有些复杂了。
<强> angularjs方法
这里使用开源的angular-file-upload模块来实现,步骤如下:
1,安装angular-file-upload模块
bower install angular-file-upload ——保存 2,添加到应用依赖
var app =, angular.module (& # 39; my-app& # 39;,, (
& # 39;才能angularFileUpload& # 39;
]); 3, HTML代码
& lt; !——文件上传指令——比;
& lt; input 类型=癴ile", nv-file-select=?”,上传=皍ploader",/比;
& lt; !——图片预览——比;
& lt; img id=癷mg-preview", ng-src=https://www.yisu.com/zixun/" {{iconUrl}} "> 这里,nv-file-select=啊氨硎臼褂胊ngular-file-upload模块的文件选择方式上,传参考官方例子
4,控制器代码
范式(& # 39;有# 39;,,(& # 39;范围# 39;美元,& # 39;FileUploader& # 39;,,函数(范围、美元,fileupload), {
,,,var uploader =, scope.uploader 美元;=,new fileupload ({
,,,,,url:, & # 39; upload.php& # 39;,//换成自己的上传地址,本地演示不换也行
,,,});
,,,uploader.onAfterAddingFile =,函数(fileItem), {
,,,,,var reader =, new FileReader ();
,,,,,reader.addEventListener (“load",, function (e), {
,,,,,,,//文件加载完之后,更新角绑定
,,,,,,,适用范围。美元(函数(){
,,,,,,,,,scope.iconUrl 美元;=,e.target.result;
,,,,,,,});
,,,,,},,假);
,,,,,reader.readAsDataURL (fileItem._file);
,,,};
})); 可以看的到,我们通过onAfterAddingFile回调函数获得所选的图片文件,接下来把图片文件转成datauri,再更新& lt; img>标签的src属性即可。
值得注意的是,我们把“更新& lt; img>标签的src属性”这个任务放到美元了范围。申请美元方法中执行,这是因为在角框架外部(如在浏览器DOM事件中,setTimeout, XHR或者第三方框架中)更新数据,角是不会同步更新绑定的。这点可以参考角美元应用参考
