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="{{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 上传图片 与预览图片的更多相关文章
- H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- PHP jQuery实现上传图片时预览图片的功能实例
在PHP项目开发中,有时候经常需要做添加图片的功能.添加图片时,一般需要即时预览上传的图片.下面这个例子就是简单的预览上传图片功能,代码如下(分两部分): 1.HTML代码: <div clas ...
- uploadPreview上传图片前预览图片
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...
- h5上传图片及预览
第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...
- 一个上传图片,预览图片的小demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
- 【HackerRank】Closest Numbers
Sorting is often useful as the first step in many different tasks. The most common task is to make f ...
- iis和apache共享80端口
Windows server 2003服务器上安装有默认 IIS 6和Apache两个服务器,IIS运行的一个.net程序,apache运行php程序,现在想让它们同时都能通过80端口访问,设置起来还 ...
- Cgroups控制cpu,内存,io示例【转】
本文转载自:https://www.cnblogs.com/yanghuahui/p/3751826.html 百度私有PaaS云就是使用轻量的cgoups做的应用之间的隔离,以下是关于百度架构师许立 ...
- Go HelloWorld 网络版和并发版
网络版 package main import ( "net/http" "fmt" ) func main() { http.HandleFunc(" ...
- 简单的文件上传的下载(动态web项目)
1.在页面中定义一个form表单,如下: <!-- 文件上传 --> <form action="${pageContext.request.contextPath}/Fi ...
- js实现级联菜单(没有后台)
html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...
- ggplot笔记002——qplot()函数
qplot()函数 一年前就听说过ggplot,很多人都说ggplot强大,ggplot无所不能,从今天开始就让我们一起来见证一下这个神奇的R包. 首先要加载ggplot2: 1 if(!suppre ...
- jsp连接sqlServer数据库教程、jsp连接sqlServer数据库报ClassNotFoundException异常
jsp连接sqlServer数据库教程: 首先讲下我用的工具版本以供参考: jar包:jtds1.3.1.jar 下载地址:点击进入 数据库:SQL Server2012 服务器:Tomcat8.0 ...
- BZOJ3241/UOJ125 [Noi2013]书法家
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- java笔试面试(转载)
Java面试笔试题大汇总(最全+详细答案) 2016-02-01 15:23 13480人阅读 评论(8) 收藏 举报 分类: Java面试题(1) 声明:有人说, 有些面试题很变态,个人认为其实 ...