由于要给一个客户做一个记账WAP，里面有调用手机拍照功能，这里记录一下，以供需要的朋友，下面是完整的一个HTML页面内容，放在服务器上然后浏览就可以了，只支持Chrome和Safari核的浏览器，我测试过QQ浏览器，Chrome，Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。

<!DOCTYPE HTML>
<html>
<head>
<title>上传图片</title>
<meta charset="utf-8">
</head>
<body>
<iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
<form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
 
<div>
<div>
<input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />
</div>
<div>
<div id="DivUp" style="display: none">
<input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
</div>
</div>
</div>
</form>
<div data-role="fieldcontain">
<div id="localImag">
<img id="preview" width="-1" height="-1" style="display: none" />
</div>
</div>
 
 
<script type="text/javascript">
function setImagePreview() {
var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
picture = file_head.value;
if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
!1;
if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
preview.style.width = "63px",
preview.style.height = "63px",
preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
else {
file_head.select(),
file_head.blur(),
img_txt = document.selection.createRange().text,
localImag = document.getElementById("localImag"),
localImag.style.width = "63px",
localImag.style.height = "63px";
try {
localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
} catch(f) {
return alert("您上传的图片格式不正确，请重新选择！"),
!1
}
preview.style.display = "none",
document.selection.empty()
}
return document.getElementById("DivUp").style.display = "block",
!0
}
</script>
</body>
</html>

服务器端程序自己加，如果自己没有服务器也可以调用http://jwzhangjie.com/preview.html来做测试

下面是调用几个浏览器的测试效果：

Chrome浏览器效果：

QQ浏览器效果：

拍照效果：

Web调用安卓，苹果手机摄像头，本地图片和文件的更多相关文章

  1. Android 调用系统分享文字、图片、文件，可直达微信、朋友圈、QQ、QQ空间、微博

    原文:Android 调用系统分享文字.图片.文件,可直达微信.朋友圈.QQ.QQ空间.微博 兼容SDK 18以上的系统,直接调用系统分享功能,分享文本.图片.文件到第三方APP,如:微信.QQ.微博 ...

  2. h5实现本地图片或文件的上传

    首先放一个今天学到的小demo: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV1.3版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  4. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV最新版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  5. javacv开发详解之1：调用本机摄像头视频

    前言:javacv开发包是用于支持java多媒体开发的一套开发包,可以适用于本地多媒体(音视频)调用以及音视频,图片等文件后期操作(图片修改,音视频解码剪辑等等功能),这里只使用最简单的本地摄像头调用 ...

  6. Android ImageView显示本地图片

    Android ImageView 显示本地图片 布局文件 <?xml version="1.0" encoding="utf-8"?> <R ...

  7. cocos2dx 通过jni调用安卓底层方法

    cocos2dx通过封装JniHelper类来调用安卓api底层函数,该文件在cocos/platform/android/jni/JniHelper.h,使用方法如下: 打开eclipse,导入co ...

  8. 编辑美化图片，保存至本地，Adobe出品（支持IOS，android，web调用）免费插件

    本例以web调用做为例子,本插件支持主流浏览器,IE要9以上,移动设备,触屏设备也支持,能自适应屏幕大小. 使用效果: 工具还是很丰富的,编辑完成之后,可以保存图片至本地目录. 使用说明: 1,需要在 ...

  9. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

随机推荐

  1. float 属性详解

    当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论 块级元素(a) 块级元素(b) b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面. 内联元素(b) b会紧跟 ...

  2. nvl isnull coalesce

    oracle 的NVL(col,0)是判断如果col字段为空的时候赋值0. postgresql里也有类似的方法 SELECT coalesce(collect_result,0) as collec ...

  3. zabbix 布署实践【4 服务器自动探索发现，并且自动关联模版】

    使用管理员登录zabbix后,在配置---自动发现--创建发现规则 如下:我们的需求是监听办公网内openstack的所有虚拟机,在其VM创建后,自动加到zabbix监控中来,并自动关联监控模版 可以 ...

  4. ViewPager和View的事件响应规则

    案例背景: 当我们实现viewpager的自动切换界面操作的时候,如果需要增加点击图片viewpager停止自动切换,松开手指viewpager自动切换又继续执行的逻辑,正常思维下实现代码如下所示: ...

  5. C#里面Auotpostback回刷时候，textbox里面的password怎么保存

    刷新页面时,如何保留页面上的PassWord模式下的TextBox的值? this.txtUserPwd.Attributes["value"] = txtUserPwd.Text ...

  6. 学习smail注入遇到的坑

    1.将需要被反编译的apk包解开之后,找到MainActivity,然后在OnCreate中添加需要加入注入的smail代码: Java代码: /** * 获取Android id * * @para ...

  7. URLEncode编码和URLDecode解码

    String text1 = java.net.URLEncoder.encode("中国" ,"utf-8" ); String text2 = java.n ...

  8. swift 2 选择头像图片

    一句话选择单个头像图片 新建ImagePickerViewController类: /* let imagePicker = ImagePickerViewController() imagePick ...

  9. Ansible Lookup

    1.  文件内容的读取 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...

  10. ucenter无法双向同步setting[allowsynlogin]为0问题解决

    深入探索ucenter各种通信失败问题飞狐ITWeb问题描述:A,B两个应用,A的登录操作等同步到B,而B无法同步到A,即只能从A单向同步到B,AB之间没有实现双向同步以前碰到过没记录,这次记录下来查 ...