angularjs 图片上传和预览
html5原生方法先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview">
var imgPreview = document.getElementById("img-preview");
// <input id="img-input" type="file">
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时,很自然的,我们想到了 angularjs方法这里使用开源的 angular-file-upload 模块来实现,步骤如下: 1、安装 angular-file-upload 模块 bower install angular-file-upload --save
2、添加到应用依赖 var app = angular.module('my-app',[
'angularFileUpload'
]);
3、HTML代码 <!--文件上传指令--> <input type="file" nv-file-select="" uploader="uploader" /> <!--图片预览--> <img id="img-preview" ng-src="{{iconUrl}}">
这里, 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);
};
}]);
可以看到,我们通过 值得注意的是,我们把“更新 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |