H5 使用input标签上传图片给后台
html代码：
<div class="hpk-showimg">
<!-- 营业执照 -->
<div class="idcardup">
<a href="javascript:;" class="a-upload">
<input v-if="ipshow" type="file" accept="image/*" name="file1" capture="camera" @change="upload">
<input v-else type="file" accept="image/*" name="file1" @change="upload">
</a>
<img :src="formData.busLicenseImgUrl" alt="" v-if="idylength>0" class="id-img3">
<img src="../image/icon_completed_idcard.png" v-if="idylength>0" class="id-img2">
<div class="rload" v-if="idylength>0" >点击重新上传</div>
<img v-else src="../image/idcard_yye@2x.png" alt="" class="id-img">
</div>
<!-- 食品执照 -->
<div class="idcardup1">
<a href="javascript:;" class="a-upload1">
<input v-if="ipshow" type="file" accept="image/*" name="file2" capture="camera" @change="upload1">
<input v-else type="file" accept="image/*" name="file2" @change="upload1">
</a>
<img :src="formData.foodsLicenseImgUrl" alt="" v-if="smflength>0" class="id-img3">
<img src="../image/icon_completed_idcard.png" v-if="smflength>0" class="id-img2">
<div class="rload" v-if="smflength>0">点击重新上传</div>
<img v-else src="../image/smfood.png" alt="" class="id-img">
</div>
</div>
less:
.hpk-showimg{
align-items: center;
height: 20%;
padding: .24rem .32rem;
.idcardup {
position: relative;
text-align: center;
background: #fff;
float: left;
width: 48.75% !important;
height: 100.6% !important;
.id-img {
width: 100% !important;
height: 100.6% !important;
margin: 0px auto;
border-radius: .1rem;
}
// 钩号
.id-img2{
position: absolute;
width: .92rem;
height: .92rem;
bottom: 1rem;
left: calc( 50% - .46rem);
}
.id-img3 {
width: 100% !important;
height: 100.6% !important;
margin: 0px auto;
border-radius: .1rem;
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
position: relative;
border: .02rem solid rgba(146, 139, 132, 0.721);
}
// 重新上传文本
.rload{
position: absolute;
bottom: .26rem;
font-size: .26rem;
height: .42rem;
color: #888;
line-height: .42rem;
left: calc( 50% - .78rem);
}
}
.idcardup1 {
position: relative;
text-align: center;
background: #fff;
float: right;
width: 48.75% !important;
height: 100.6% !important;
.id-img {
width: 100% !important;
height: 100.6% !important;
margin: 0px auto;
border-radius: .1rem;
}
.id-img2{
position: absolute;
width: .92rem;
height: .92rem;
bottom: 1rem;
left: calc( 50% - .46rem);
}
.id-img3 {
width: 100% !important;
height: 100.6% !important;
margin: 0px auto;
border-radius: .1rem;
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
position: relative;
border: 1px solid rgba(146, 139, 132, 0.721);
}
.rload{
position: absolute;
bottom: .26rem;
font-size: .26rem;
height: .42rem;
color: #888;
line-height: .42rem;
left: calc( 50% - .78rem);
}
}
}
.a-upload {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
cursor: pointer;
color: #888;
background: transparent;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
z-index: 9;
*zoom: 1;
}
.a-upload input {
position: absolute;
left: 0px;
top: 0;
opacity: 0;
width: 100% !important;
height: 100% !important;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload1 {
height: 100% !important;
position: absolute;
cursor: pointer;
left: 0;
color: #888;
background: transparent;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
z-index: 9;
*zoom: 1;
width: 100%;
}
.a-upload1 input {
position: absolute;
left: 0px;
top: 0;
opacity: 0;
width: 100% !important;
height: 100% !important;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: transparent;
border-color: #ccc;
text-decoration: none
}
vue:
data() {
return {
ipshow:false,//切换input属性
formData:{
busLicenseImgUrl:"",//营业执照url
foodsLicenseImgUrl:"",//食品执照url
},
idylength:0,//营业执照长度
smflength:0,//食品执照长度
}
},
//上传营业执照
upload(e){
let files = e.target.files || e.dataTransfer.files
var index = 0;//营业执照标识
if (!files.length) return
this.imgPreview(files[0],index)
}, //上传食品
upload1(e){
let files = e.target.files || e.dataTransfer.files
var index = 1;//食品执照标识
if (!files.length) return
this.imgPreview(files[0],index)
}, imgPreview(file,index) {
let self = this
let Orientation
// 去获取拍照时的信息，解决拍出来的照片旋转问题
EXIF.getData(file, function () {
Orientation = EXIF.getTag(this, 'Orientation')
})
// 看支持不支持FileReader
if (!file || !window.FileReader) return
if (/^image/.test(file.type)) {
var fileName = file.name;
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function () {
let result = this.result;
let img = new Image();
img.src = result;
//判断图片是否小于2M,是就直接上传，反之压缩图片
if (this.result.length <= (2048 * 1024)) {
var headerImage = this.result;
self.postImg(headerImage, fileName, file, index);
} else {
img.onload = function () {
let data = self.compress(img, Orientation);
var headerImage = data;
self.postImg(headerImage, fileName, file, index);
}
}
}
} },
postImg(headerImage, fileName, fil, index) {
this.showjz = true;
//压缩后的base64图片地址
var imageBase64 = headerImage.substring(headerImage.indexOf(",") + 1)
var mchNo = this.getQueryVariable('mchNo')
let data = {
mchNo:mchNo,
imageBase64:imageBase64
}
if(index == 0){
//营业执照
axios({
method: 'post',
url: "http://test.hpk.msxiaodai.com/apply/businessLicenseOCR",
data: data
})
.then(
response => {
var res = response.data
if (res.code == '0000') {
this.idylength = 1;
this.showjz = false;
if(this.idylength == 1 && this.smflength == 1){
this.showcontent = true;//显示数据信息
}
this.formData.busLicenseImgUrl = res.data.imageUrl
this.formData.mchAddress = res.data.address
this.formData.legal = res.data.legal
this.formData.mchName = res.data.name
this.formData.organCode = res.data.regNum
this.formData.shopName = res.data.shopName
this.formData.business = res.data.business
this.formData.composingForm = res.data.composingForm
this.formData.mainType = res.data.mainType
this.formData.period = res.data.period vant.Toast.success('营业执照识别成功');
}else if(res.code == '1023'){
this.showerror = true
this.errorval = res.msg
this.showjz = false;
this.showcontent = false;//显示数据信息
this.idylength = 0;
this.formData.busLicenseImgUrl = ""
this.formData.mchAddress = ""
this.formData.legal = ""
this.formData.mchName = ""
this.formData.organCode = ""
this.formData.business = ""
this.formData.composingForm = ""
this.formData.mainType = ""
this.formData.period = ""
} else {
this.showerror = true
this.errorval = '请上传真实有效的营业执照'
this.showjz = false;
this.showcontent = false;//显示数据信息
this.idylength = 0;
this.formData.busLicenseImgUrl = ""
this.formData.mchAddress = ""
this.formData.legal = ""
this.formData.mchName = ""
this.formData.organCode = ""
this.formData.business = ""
this.formData.composingForm = ""
this.formData.mainType = ""
this.formData.period = ""
}
},
response => {
this.showjz = false;
this.idylength = 0;
}
)
}else{
if(this.idylength !=0){
//食品执照
axios({
method: 'post',
url: "http://test.hpk.msxiaodai.com/apply/foodLicenseOCR",
data: data
})
.then(
response => {
var res = response.data
if (res.code == '0000') {
this.smflength = 1;
//显示软键盘
this.butsk()
this.showjz = false;
this.showcontent = true;//显示数据信息
this.formData.foodsLicenseImgUrl = res.data.imageUrl vant.Toast.success('食品经营许可证识别成功');
}else if(res.code == '1023'){
this.showerror = true
this.errorval = res.msg
this.showcontent = false;//显示数据信息
this.showjz = false;
this.smflength = 0;
this.formData.foodsLicenseImgUrl = ""
} else {
this.showerror = true
this.errorval = '请上传真实有效的食品经营许可证'
this.showcontent = false;//显示数据信息
this.showjz = false;
this.smflength = 0;
this.formData.foodsLicenseImgUrl = ""
}
},
response => {
this.showjz = false;
this.showerror = true
this.errorval = '异常'
this.smflength = 0;
}
) }else{
this.showerror = true
this.errorval = '请先上传真实有效的营业执照'
this.showjz = false;
}
} }, // 压缩图片不得大于2M
compress(img, Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于6百万像素，计算压缩比并将大小压至600万以下
let ratio;
if ((ratio = width * height / 6000000) > 1) {
console.log("大于600万像素")
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于400万则使用瓦片绘制
let count;
if ((count = width * height / 4000000) > 1) {
console.log("大于400万像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0,
nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//进行最小压缩
let ndata = canvas.toDataURL('image/jpeg', 0.2);
// console.log('压缩前：' + initSize);
// console.log('压缩后：' + ndata.length);
// console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}, },
H5 使用input标签上传图片给后台的更多相关文章
- input标签上传图片怎么获取src；
大家都知道input标签可以上传文件 如: <input type="file"/> 就可以上传文件,当然也可以上传图片,上传的图片的src地址如何取到: var re ...
- H5新增input标签
1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...
- [oldboy-django][2深入django]学生管理（Form）-- 编辑(设置input标签属性，设置input标签默认显示值，设置input的类型）
1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及sub ...
- 前端与后台可能需要使用交互的表单form，input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- 为什么JS动态生成的input标签在后台有时候没法获取到
最近在做一个产品添加的功能,需求有点奇葩,所以在添加的时候免不了要用到动态生成控件,然后我就使用了JS去动态生成一些 checkbox类型的input标签,在以前用asp.net在后台生成的input ...
- 如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...
- jsp页面file标签上传图片以及blob类型数据库存取。
我的jsp页面表单如下: <form name="form1" action="/YiQu/AddUserServlet?jurisdiction=1" ...
- 关于input标签和placeholder在IE8，9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
随机推荐
- Valiant Hearts： The Great War -- 《勇敢的心》
“友情,爱情,亲情”
- localStorage 存储
localStorage 的优势 localStorage 拓展了 cookie 的 4K 限制. localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于 ...
- centos7.x中安装SQL Server
本文内容是采集的好几位博主的博文进行的一个整合,内容更为精准和详尽,以下是我参照的几篇博文地址: 微软官方文档:https://docs.microsoft.com/zh-cn/sql/linux/s ...
- python 學習深淺拷貝、集合、、作用域、函數
python 學習深淺拷貝.集合..作用域.函數 2020開年新冠肺炎流行大部分人員.工廠.單位無法復工生產,人員隔離每天外出都要戴口罩,在家隔離期間悶壞了感覺把半年的口糧都幹掉了,嚴重考察大家的資本 ...
- Codeforces Round447 D树上前缀和
已知完全二叉树和每条边的权值,q次询问,每次给出sta起点和H. w=(H-点到sta的权值),求w>0的所有w的加和. 这题用树上前缀和来写,e[i]记录子树上的点到点i的距离,sum[i][ ...
- 使用TensorRT对人脸检测网络MTCNN进行加速
前言 最近在做人脸比对的工作,需要用到人脸关键点检测的算法,比较成熟和通用的一种算法是 MTCNN,可以同时进行人脸框选和关键点检测,对于每张脸输出 5 个关键点,可以用来进行人脸对齐. 问题 刚开始 ...
- Excel_单元格格式_查找替换、定位
不重复! 显示格式:Ctrl+1 1,合并后居中,填充颜色,设置单元格边框,划斜线,格式刷(单击,双击) 2,单元格数字格式,格式不会改变值!自定义(编码规则) 4个 a :只显示星期:周+aaa:周 ...
- Spring boot2.0学习笔记(一)
学习环境: jdk1.8 (Spring Boot 推荐jdk1.8及以上): java version "1.8.0_241" Maven 3.x (maven 3.2 以上版本 ...
- Markdown 的效果
这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字 这是倾斜的文字 这是斜体加粗的文字 这是加删除线的文字 这是引用的内容 这是引用的内容 这是引用的内 ...
- Enable VT-x in your BIOS security settings, ensure that HAXM is installed properly. Try disabling 3rd party security software if the problem still occurs
win7系统安装了了AndroidStudio3.5后用模拟器报错:Enable VT-x in your BIOS security settings, ensure that HAXM is in ...