由于要给一个客户做一个记账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. Linux 分区挂载方案

    /boot 1G swap 2G(看内存决定) / 10-15G /home 5G

  2. android .9图片制作与注意

    首先找到你的开发软件所依赖的SDK,在电脑中找到这个SDK的安装路径,如果有太多SDK分不清楚,Window→Android SDK Manager 点开可以看到你的依赖SDK路径,多余的不说直接发个 ...

  3. 关于float和position

      在div 块级元素中,一般我们的div块都是流式的,如果你设定一个div,接下来的div就会另起行,也就是块级元素的定义 但是一般排版不是这样的,最典型的应该就是这种布局了,那么中间的那三个div ...

  4. 关于php数组是否要声明

    不知道大家有没有这样玩过php数组,正常情况下直接不声明,直接使用数组,会发现输出的与声明后的结果是一样的.

  5. CodeForces 709A Juicer

    简单题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inclu ...

  6. linux显示行数命令

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...

  7. niceScroll接口大全

    Query滚动条插件兼容ie6+.手机.ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollIn ...

  8. 3.struts2访问Servlet API,并和mybaits实现全套增删改查

    1.创建数据库脚本userinfo.sql prompt PL/SQL Developer import file prompt Created on 2016年5月19日 by pc set fee ...

  9. JS replace可以接受回调函数

    这是js最鲜为人知的秘密之一,v 1.3首次引入.大部分情况下repalce的使用情况如下: '10 12 13 40 50'.replace(/\d+/g,'*');//用 * 替换所有的数字 这是 ...

  10. SaltStack Job管理

    Job基本管理 Jid: job id,格式为%Y%m%d%H%M%S%f 在master在下发指令消息时,会附带上产生的jid.minion在接收到指令开始执行时,会 在本地的cachedir(默认 ...