Angularjs实现上传图片预览功能
废话不多说了,直接给大家贴代码了,具体代码如下所示:
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实现上传图片预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!