angular 上传图片并显示_angular +H5 上传图片 与预览图片

//index.html

司机姓名*

司机身份证号

手机号*

身份证正面

上传文件

身份证反面

上传文件

驾驶证照片正面

上传文件

保存

返回

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";

}

};

原文：http://www.cnblogs.com/mamimi/p/7132074.html