//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 上传图片 与预览图片的更多相关文章

  1. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  2. PHP jQuery实现上传图片时预览图片的功能实例

    在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...

  3. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  4. h5上传图片及预览

    第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...

  5. 一个上传图片,预览图片的小demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  7. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  8. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  9. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

随机推荐

  1. 【HackerRank】Closest Numbers

    Sorting is often useful as the first step in many different tasks. The most common task is to make f ...

  2. iis和apache共享80端口

    Windows server 2003服务器上安装有默认 IIS 6和Apache两个服务器,IIS运行的一个.net程序,apache运行php程序,现在想让它们同时都能通过80端口访问,设置起来还 ...

  3. Cgroups控制cpu,内存,io示例【转】

    本文转载自:https://www.cnblogs.com/yanghuahui/p/3751826.html 百度私有PaaS云就是使用轻量的cgoups做的应用之间的隔离,以下是关于百度架构师许立 ...

  4. Go HelloWorld 网络版和并发版

    网络版 package main import ( "net/http" "fmt" ) func main() { http.HandleFunc(" ...

  5. 简单的文件上传的下载(动态web项目)

    1.在页面中定义一个form表单,如下: <!-- 文件上传 --> <form action="${pageContext.request.contextPath}/Fi ...

  6. js实现级联菜单(没有后台)

    html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...

  7. ggplot笔记002——qplot()函数

    qplot()函数 一年前就听说过ggplot,很多人都说ggplot强大,ggplot无所不能,从今天开始就让我们一起来见证一下这个神奇的R包. 首先要加载ggplot2: 1 if(!suppre ...

  8. jsp连接sqlServer数据库教程、jsp连接sqlServer数据库报ClassNotFoundException异常

    jsp连接sqlServer数据库教程: 首先讲下我用的工具版本以供参考: jar包:jtds1.3.1.jar  下载地址:点击进入 数据库:SQL Server2012 服务器:Tomcat8.0 ...

  9. BZOJ3241/UOJ125 [Noi2013]书法家

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  10. java笔试面试(转载)

    Java面试笔试题大汇总(最全+详细答案) 2016-02-01 15:23 13480人阅读 评论(8) 收藏 举报  分类: Java面试题(1)  声明:有人说, 有些面试题很变态,个人认为其实 ...