AngularJs上传前预览图片的实例代码
在工作中，使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，之前查了一些资料，结合实践，得出一种比较实用的方法，相对简化版，在这里记录一下，如有不同看法，欢迎一起沟通，一起成长。
demo.html:
<!doctypehtml>
<htmlng-app="myTestCtrl">
<head>
<metacharset="UTF-8">
<title>demo</title>
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<scriptsrc="myCtrl.js"></script>
<styletype="text/css">
.inputBox{width:160px;height:28px;padding:0008px;box-sizing:border-box;background-color:#fff;margin-left:5px;border:1pxsolid#c4c4c4;color:#333;border-radius:3px;-o-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.inputBox:focus{border:1pxsolid#207fe9;}
.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd;}
.btn{display:inline-block;padding:6px12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1pxsolidtransparent;border-radius:4px;}
.bg-bbbbbb{background-color:#bbb;}
.fl{float:left;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml30{margin-left:30px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.f-cb:after:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb{zoom:1;}
.f-cb.topSearch{float:left;margin-top:10px;line-height:30px;font-size:12px;}
</style>
</head>
<bodyid="myTestCtrl"ng-controller="myTestCtrl">
<divclass="wrapper">
<divclass="content">
<divclass="f-cb"style="height:40px;">
<divclass="topSearch"><spanclass="w70trdibfl">主视觉图：</span><inputtype="text"class="inputBoxflml5"ng-model="fileName"><buttonclass="btnbtn-primaryml10"ng-class="{'bg-bbbbbb':imgDisabled}"style="width:60px;margin-top:-3px;height:18px;position:relative;"img-upload></button></div>
</div>
<divclass="f-cbmt10"><imgng-src="{{thumb.imgSrc}}"style="width:200px;height:200px;"ng-show="thumb.imgSrc"/></div>
</div>
<divclass="mt20ml30">
<buttonclass="btnbtn-primary"ng-click="saveClick()"ng-class="{'bg-bbbbbb':submitDisabled}">提交</button>
</div>
</div>
</body>
</html>
<spanstyle="font-size:14px;">myCtrl.js:</span>
<prename="code"class="javascript">//关键js部分
varmyTestCtrl=angular.module('myTestCtrl',[]);
//定义“上传”指令，修改后也可用于上传其他类型的文件
myTestCtrl.directive("imgUpload",function(){
return{
//通过设置项来定义
restrict:'AE',
scope:false,
template:'<divclass="fl"><inputtype="button"id="storeBtn"style="padding:0;position:absolute;top:0;left:0;background:none;border:none;color:#fff;width:84px;height:30px;line-height:30px;"value="选择文件"><inputtype="file"name="testReport"id="file"ng-disabled="imgDisabled"style="position:absolute;top:0;left:0;opacity:0;height:30px;"accept=".jpg,.png"></div>',//name:testReport与接口字段相对应。
replace:true,
link:function(scope,ele,attrs){
ele.bind('click',function(){
$('#file').val('');
});
ele.bind('change',function(){
scope.file=ele[0].children[1].files;
if(scope.file[0].size>52428800){
alert("图片大小不大于50M");
scope.file=null;
returnfalse;
}
scope.fileName=scope.file[0].name;
varpostfix=scope.fileName.substring(scope.fileName.lastIndexOf(".")+1).toLowerCase();
if(postfix!="jpg"&&postfix!="png"){
alert("图片仅支持png、jpg类型的文件");
scope.fileName="";
scope.file=null;
scope.$apply();
returnfalse;
}
scope.$apply();
scope.reader=newFileReader();//创建一个FileReader接口
console.log(scope.reader);
if(scope.file){
//获取图片（预览图片）
scope.reader.readAsDataURL(scope.file[0]);//FileReader的方法，把图片转成base64
scope.reader.onload=function(ev){
scope.$apply(function(){
scope.thumb={
imgSrc:ev.target.result//接收base64，scope.thumb.imgSrc为图片。
};
});
};
}else{
alert('上传图片不能为空!');
}
});
}
};
});
myTestCtrl.controller("myTestCtrl",function($scope,$http){
//导入图片
$scope.saveClick=function(){
//禁用按钮
$scope.imgDisabled=true;
$scope.submitDisabled=true;
varurl='';//接口路径
varfd=newFormData();
fd.append('testReport',$scope.file[0]);//参数testReport=后台定义上传字段名称；$scope.file[0]内容
$http.post(url,fd,{
transformRequest:angular.identity,
headers:{
'Content-Type':undefined
}
}).success(function(data){
if(data.code!=100){
alert(JSON.stringify('文件导入失败：'+files.files[0].name+'，请重新上传正确的文件或格式'));
}else{
alert(JSON.stringify('文件导入成功：'+files.files[0].name));
}
//恢复按钮
$scope.imgDisabled=false;
$scope.submitDisabled=false;
}).error(function(data){
alert('服务器错误，文件导入失败！');
//恢复按钮
$scope.imgDisabled=false;
$scope.submitDisabled=false;
});
};
});
</pre>
<br>
<pre></pre>
<p></p>
<pre>
</pre>
<p></p>
<pre>
</pre>
关于angularjs的知识大家可以参考下小编给大家整理的专题，angularjs学习笔记，一起看看吧！
以上所述是小编给大家介绍的AngularJs上传前预览图片的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！