这次给大家带来angularjs实现图片预览上传，angularjs实现图片预览上传的注意事项有哪些，下面就是实战案例，一起来看一下。
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<input type="file"ng-file-select="onfileselect($files)"accept="image/*">
app.factory(filereader,function($q, $log) {
varonload =function(reader, deferred, scope) {
returnfunction() {
scope.$apply(function() {
deferred.resolve(reader.result);
});
};
};
varonerror =function(reader, deferred, scope) {
returnfunction() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};
varonprogress =function(reader, scope) {
returnfunction(event) {
scope.$broadcast(fileprogress,
{
total: event.total,
loaded: event.loaded
});
};
};
vargetreader =function(deferred, scope) {
varreader =newfilereader();
reader.onload = onload(reader, deferred, scope);
reader.onerror = onerror(reader, deferred, scope);
reader.onprogress = onprogress(reader, scope);
returnreader;
};
varreadasdataurl =function(file, scope) {
vardeferred = $q.defer();
varreader = getreader(deferred, scope);
reader.readasdataurl(file);
returndeferred.promise;
};
return{
readasdataurl: readasdataurl
};
});
选择图片后执行的方法
$scope.onfileselect =function(files) {
varfilein=files[0];
varimg =newimage();
varfiletype = filein.name.substring(filein.name.lastindexof(.) + 1, filein.name.length);
if(filein.size>5242880){//单位是b，此处不允许超过5m
alert(图片不能超过5m)
return;
}
if(filetype=='jpg'|| filetype=='png'|| filetype=='jpeg '|| filetype=='jpg'|| filetype=='png'|| filetype=='jpeg'){
}else{
alert(图片格式只支持:jpg,png,jpeg)
return;
}
filereader.readasdataurl(filein, $scope)
.then(function(result) {
$scope.imagesrc = result;
console.log(img.width);
});
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是angularjs实现图片预览上传的详细内容。