angular +H5 上傳圖片 與預覽圖片
阿新 • • 發佈：2017-07-07
scrip reader tex load .sh upd http upload wim
//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="{{frontIdCardPreview}}" class="smImg" alt="..." id="frontIdCardPreview">
<label class="labelForInput btn btn-info" for="frontIdCard">上傳文件</label>
<input type="file" id="frontIdCard" class="inputOfFile" ng-src="{{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="{{backIdCardPreview}}" class="smImg" alt="..." id="backIdCardPreview">
<label class="labelForInput btn btn-info" for="backIdCard">上傳文件</label>
<input type="file" class="inputOfFile" id="backIdCard" ng-src="{{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="{{photoDriverCardPreview}}" class="smImg" alt="..." id="photoDriverCardPreview">
<label class="labelForInput btn btn-info" for="photoDriverCard">上傳文件</label>
<input type="file" class="inputOfFile" id="photoDriverCard" ng-src="{{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 = fileArr[i].bigImgRtnPath;
}else if("backIdCard" === fileArr[i].fileNameKey){
$scope.backIdCardSrc = fileArr[i].bigImgRtnPath;
}else if("photoDriverCard" === fileArr[i].fileNameKey){
$scope.photoDriverCardSrc = fileArr[i].bigImgRtnPath;
}
}
myDriverService.updateDriver.post({
"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 = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "images/noimg.png";
}
};
angular +H5 上傳圖片 與預覽圖片