打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
angularjs上传多张图片并预览
WindySky
>《图片处理》
2017.09.27
关注
angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) {
return {
restrict:'A',
link:function(scope, element, attrs, ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
var imgviewID = attrs["imgViewId"];
var imgView = angular.element(document.querySelector("."+imgviewID));
element.bind('change', function(event) {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0];
fileReader.readAsDataUrl(scope.file, scope).then(function(result) {
imgView.attr("src",result);
});
});
}
}
}]);
angular.module('routerModule').factory('fileReader', ["$q", "$log", function($q, $log) {
var onLoad = function(reader, deferred, scope) {
return function() {
scope.$apply(function() {
deferred.resolve(reader.result);
});
}
}
var onError = function(reader, deferred, scope) {
return function() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};
var getReader = function(deferred, scope) {
var reader = new FileReader();
reader.onload = onLoad(reader, deferred, scope);
reader.onerror = onError(reader, deferred, scope);
return reader;
};
var readAsDataURL = function(file, scope) {
var deferred = $q.defer();
var reader = getReader(deferred, scope);
reader.readAsDataURL(file);
return deferred.promise;
}
return {
readAsDataUrl: readAsDataURL
};
}
]);
html关键代码
[html]
view plain
copy
<section class="infogroup">
<h4>法人证件</h4>
<div class="row relatedCard">
<div class="col-md-4 txtcenter">
<p>身份证正面</p>
<div><img ng-src="showImg/{{dealer.idCardFace}}" class="idCardFace" enlarge-pic/></div>
<span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑
<input type="file" file-model="idCardFace" img-view-id="idCardFace" />
</span>
</div>
<div class="col-md-4 txtcenter">
<p>身份证反面</p>
<div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div>
<span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑
<input type="file" file-model="idCardBack" img-view-id="idCardBack" />
</span>
</div>
</div>
</section>
controller.js中发送到后台的数据
[javascript]
view plain
copy
$scope.postData = {
dealerId: $scope.dealer.dealerId,
companyName: $scope.dealer.companyName,
companySize: $scope.dealer.companySize,
idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src,
idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src
};
$http.post('updateDealerCertificate',$scope.postData).success(function(data){
<!-- 成功执行代码 -->
});
预览如下:
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
javascript – AngularJS更新功能(仍)无法正常工作
webUploader大文件断点续传学习心得
使用 Node.js、Express、AngularJS 和 MongoDB 构建一个实时问卷调查应用程序
關於 Javascript 的那些事兒
关于使用file上传图片获取图片绝对路径
AngularJS学习笔记
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×