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上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
- 建议50:Python中的高级数据结构
# -*- coding:utf-8 -*- ''' Collection.Array.Heapq.Bisect.Weakref.Copy以及Pprint collections模块包含了内建类型之外 ...
- 【leetcode刷题笔记】Excel Sheet Column Number
Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...
- [SCOI2013]火柴棍数字(背包)
题目 做饭 由于越高位越好,我们先得出能组成的最高位 \(f[i][j][k]\)表示从低到高位第\(i\)位,手里拿着\(j\)根火柴,第\(i\)位是否为\(0\)所需要的最少火柴 我们转移仅需得 ...
- ubuntu下make无法安装的问题
发布时间:2015-10-30 10:51:30来源:linux网站作者:_莫欺少年穷 在帮同学服务器安装环境过程中,发现,make 命令不能使用,提示: The program 'make' is ...
- rem布局原理
昨天去面试,面试官竟然说他们用媒体查询针对不同的屏幕宽度做了9个不同的rem布局,呵呵... eg: html{font-size:20px;} div{width:16rem;height:100p ...
- python的计算保留小数
1.要使得算术运算的结果有小数,则运算的对象至少有一个是float型的. 2.控制小数的位数:字符串格式化 格式:需要进行格式化的字符串%插入对象 需要进行格式化的字符串中带有一个或多个嵌入的转换目标 ...
- awk的控制语句
本章主要讲actions中的控制语句,和C语言的控制语句类似. 1.选择语句 if (condition) then-body else else-body 2.循环语句之while: while ( ...
- for循环执行流程
语句格式: for(表达式1;表达式2;表达式3) { 循环体 } 表达式1:赋值表达式,用来给控制变量赋初值.(只执行一次) 表达式2:逻辑表达式,是循环的控制条件,用来判断控制变量是否符合循环条件 ...
- vm+ubuntu联网
在vm下刚装了ubuntu,就是上不了网,确认以下配置后方可以 1.我的电脑开机自动把VM的相关服务都关闭了,需要手动打开 在控制面板中搜索服务,手动启动vm服务 2.在适配器里启用vm网卡 3.使用 ...
- How to Google
程序员的基础生存技能 -- 关于搜索引擎的小贴士 如果票选近二十年最伟大的发明,我相信搜索引擎肯定会占据一个不容小觑的位置,它不单是一项发明,更是一项成就,最大程度消灭了信息的不平等.既然人人都可以接 ...