HTML5属性--(capture="camera") 上传照片或者打开手机相机
要获取手机相机拍照或者访问相册 这里贴一个相关链接:http://blog.csdn.net/jackfrued/article/details/8967667
JSP页面代码:
<input type="file" accept="image/*" capture="camera" id="picFile" onchange="readFile(this)" style="width:30px;height:30px;opacity:0"/ >
JS代码:
function readFile(obj){
var file = obj.files[0];
//判断类型是不是图片 不难发现这个检测是基于正则表达式的,因此可以进行各种复杂的匹配,非常有用。
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
getResultbyOCR(this.result);
}
}
function getResultbyOCR(imagesdata) {
var requestdata = {
imagesdata: imagesdata
};
$.ajax({
type: "POST",
url: getUrl() + "/vehicleInfor/getResultbyOCR.do",
data: JSON.stringify(requestdata),
// 将对象序列化成JSON字符串
dataType: "json",
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'],time: 60*1000});
},
contentType: 'application/json;charset=utf-8',
// 设置请求头信息
success: function(data) {
if (data.length == 0) {
layer.close(this.layerIndex);
alert("识别失败");
} else {
var outputValue = data.outputs[0].outputValue;
if (outputValue != null && "undefined" !== typeof(outputValue)) {
var datavalue = outputValue.dataValue;
if (datavalue != null && "undefined" !== typeof(datavalue)) {
datavalue = eval("(" + datavalue + ")");
var successflag = datavalue.success;
if (successflag) {
var engine_num = datavalue.engine_num;
var modelName = datavalue.model;
var owner = datavalue.owner;
var plate_num = datavalue.plate_num;
var register_date = datavalue.register_date;
var vin = datavalue.vin;
$("#drvowner").val(owner);
$("#lcnno").val(plate_num);
$("#vinno").val(vin);
$("#model").val(modelName);
$("#engno").val(engine_num);
$("#registerdate").val(register_date);
layer.close(this.layerIndex);
} else {
layer.close(this.layerIndex);
alert("识别失败");
}
} else {
layer.close(this.layerIndex);
alert("识别失败");
}
} else {
layer.close(this.layerIndex);
alert("识别失败");
}
}
},
error: function(res) {
layer.close(this.layerIndex);
alert("识别失败");
}
});
}
Java代码:
@RequestMapping("/getResultbyOCR.do")
public @ResponseBody String getResultbyOCR( @RequestBody String requestData,HttpServletResponse response){
logger.info("开始识别行驶证 图片内容为 : "+requestData);
String result=vehicleInforService.getVehicleinforByOCR( requestData);
logger.info("结束识别行驶证,结果为 : "+result);
return result;
}
HTML5属性--(capture="camera") 上传照片或者打开手机相机的更多相关文章
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- HTML5 图片本地压缩上传插件「localResizeIMG」
移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...
- 基于HTML5多图片Ajax上传可预览
html5多图控件<input id="fileImage" type="file" size="30" name="fil ...
- 怎么样通过php使用html5实现多文件上传?(php多图上传)
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...
- HTML5手机端拍照上传
1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...
- Django项目:CRM(客户关系管理系统)--61--51PerfectCRM实现CRM客户报名流程学生合同上传照片
# sales_views.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.db import IntegrityError # 主动 ...
- Iphone H5上传照片被旋转
最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- 深入研究HTML5实现图片压缩上传
上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...
随机推荐
- Android开发学习——Android项目的目录结构
Android项目的目录结构: 资源文件夹: 清单配置文件: Android的四大组件在使用前全部需要在清单文件中配置 <?xml version="1.0" encodin ...
- mysql安装及配置服务
第一次安装mysql 1.本地环境:windows 7 -64,mysql版本5.5.28(mysql-5.5.28-winx64.msi) 2.双击mysql-5.5.28-winx64.msi,进 ...
- IIS7如何部署asp.net网站
第一步:发布网站 右键asp.net web项目,选择发布, 然后新建配置文件名称并选择 "文件系统" 发布方法. 目标位置选择本地新建的文件夹如: IISWebSite 第二 ...
- goldengate abended with no data found
先来看下报错ggserr.log: 2016-12-22 04:48:52 WARNING OGG-02544 Unhandled error (ORA-26787: The row with k ...
- 聊下 git 使用前的一些注意事项
连接方式https.ssh 在使用git的时候,不管你的服务器是开源平台github还是私服gitlab,你都需要clone仓库到本地,这个clone的时候就需要你选择连接方式.这个连接方式决定了你与 ...
- PostgreSQL-数据目录与pg_ctl
# tail /etc/profile PATH="$PATH":/usr/lib/postgresql/9.2/bin/ export PATH export PGDATA=/v ...
- OpenStack云计算快速入门之一:OpenStack及其构成简介
原文:http://blog.chinaunix.net/uid-22414998-id-3263551.html OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助 ...
- MySQL命令行下执行.sql脚本详解
本文主要介绍一个在MySQL命令行下执行脚本文件的例子,通过这个例子让我们来了解一下在命令行下MySQL是怎样执行脚本的吧.现在我们开始介绍这一过程. 1.首先编写sql脚本,保存为的:book.sq ...
- Serial Port Programming using Win32 API(转载)
In this tutorial we will learn How to communicate with an external device like a microcontroller boa ...
- Bootstrap CSS 表单
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...