首页 > 代码库 > angular +H5 上传图片 与预览图片
angular +H5 上传图片 与预览图片
//index.html
<form class="form-horizontal">
<div class="panel panel-default">
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="form-group">
<label class="col-sm-2 control-label">司机姓名<span class="need">*</span></label>
<div class="col-sm-4">
<input type="text" class="form-control" ng-model="name" maxlength="20">
</div>
<label class="col-sm-2 control-label">司机身份证号</label>
<div class="col-sm-4">
<input type="text" class="form-control" ng-model="idNo" maxlength="18">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">手机号<span class="need">*</span></label>
<div class="col-sm-4">
<input type="text" class="form-control" ng-model="mobile" maxlength="11">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">身份证正面</label>
<div class="col-sm-4">
<img src="http://www.mamicode.com/{{frontIdCardPreview}}" class="smImg" alt="..." id="frontIdCardPreview">
<label class="labelForInput btn btn-info" for="frontIdCard">上传文件</label>
<input type="file" id="frontIdCard" class="inputOfFile" ng-src="http://www.mamicode.com/{{frontIdCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘frontIdCard‘,‘frontIdCardPreview‘)">
</div>
<label class="col-sm-2 control-label">身份证反面</label>
<div class="col-sm-4">
<img src="http://www.mamicode.com/{{backIdCardPreview}}" class="smImg" alt="..." id="backIdCardPreview">
<label class="labelForInput btn btn-info" for="backIdCard">上传文件</label>
<input type="file" class="inputOfFile" id="backIdCard" ng-src="http://www.mamicode.com/{{backIdCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘backIdCard‘,‘backIdCardPreview‘)">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">驾驶证照片正面</label>
<div class="col-sm-4">
<img src="http://www.mamicode.com/{{photoDriverCardPreview}}" class="smImg" alt="..." id="photoDriverCardPreview">
<label class="labelForInput btn btn-info" for="photoDriverCard">上传文件</label>
<input type="file" class="inputOfFile" id="photoDriverCard" ng-src="http://www.mamicode.com/{{photoDriverCard[0].name}}" onchange="angular.element(this).scope().previewImage(‘photoDriverCard‘,‘photoDriverCardPreview‘)">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-info" ng-click="submit()">保存</button>
<button type="button" class="btn btn-default" ui-sref="main.myDriver">返回</button>
</div>
</form>
service.js
var uploadFile = function(dataParam,successFn,errFun){ $http({ method: ‘POST‘, url: configuration.apiBaseUrl+‘/api/tms/upload/uploadFile‘, data: dataParam, headers: {‘Content-Type‘: undefined}, transformRequest: angular.identity }).success(function (data) { if(typeof successFn ===‘function‘){ successFn(data); } }).error(function (data) { if(typeof errFun === ‘function‘){ errFun(data); } }); };
3:controller.js
function save(frontIdCard,backIdCard,photoDriverCard) { var fd = new FormData(); if(frontIdCard){ fd.append("frontIdCard", frontIdCard); } if(backIdCard){ fd.append("backIdCard", backIdCard); } if(photoDriverCard){ fd.append("photoDriverCard", photoDriverCard); } myCarService.uploadFile(fd, function (data) { var fileArr = data.content; for(var i=0; i < fileArr.length; i++){ if("frontIdCard" === fileArr[i].fileNameKey){ $scope.frontIdCardSrc = http://www.mamicode.com/fileArr[i].bigImgRtnPath;"backIdCard" === fileArr[i].fileNameKey){ $scope.backIdCardSrc = http://www.mamicode.com/fileArr[i].bigImgRtnPath;"photoDriverCard" === fileArr[i].fileNameKey){ $scope.photoDriverCardSrc = http://www.mamicode.com/fileArr[i].bigImgRtnPath;"driverId":$scope.driverId, "name":$scope.name, "idNo":$scope.idNo || "", "mobile":$scope.mobile, "frontIdCard":$scope.frontIdCardSrc, "backIdCard":$scope.backIdCardSrc, "photoDriverCard":$scope.photoDriverCardSrc, "partnerNo": AppSession.getPartnerNo() },function(data){ if(data.code === 0){ messageCenterService.show("操作提示","保存成功", 2000); $state.go(‘main.myDriver‘, { }, { reload: false }); }else{ messageCenterService.show("操作提示",data.msg, 2000); } }); }); }
照片的预览
$scope.previewImage = function(fileId, imgId) { var preview = document.querySelector("#" + imgId); var file = document.querySelector("#" + fileId).files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = http://www.mamicode.com/reader.result;"images/noimg.png"; } };
angular +H5 上传图片 与预览图片
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。