由于要给一个客户做一个记账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. C# 三角形外心和外接圆半径计算方法

    在网上找了好久,想找一个现成的方法来用,折腾半天发现没有一个好用的,最后迫不得已自己写了一个,需要的同学可以直接拿去用, private void GetTriangleExcenterRadius( ...

  2. 获取URL中的参数值

    //获取url中ID的值function getParamByName(name, url) { var match = RegExp('[?&]' + name + '=([^&]* ...

  3. Foxit Reader(福昕PDF阅读器) v4.3.1.218 绿色专业版

    软件名称:Foxit Reader(福昕PDF阅读器) v4.3.1.218 绿色专业版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 4.40MB 图片 ...

  4. jquery验证表单是否满足正则表达式是否通过验证例子

    //验证通用函数 a表示元素对象,b表示正则表达式,c存bool值 function testyz(a,b,c){ c=false; $(a).on("blur",function ...

  5. iScroll 下 a 标签失效

    遇到个莫名其妙的问题,iScroll 下的 a 标签点击没有反应了,不管怎么调整 z-index 都无效果,很是无语. 查找半天后找到解决方法: $(function(){ new IScroll(' ...

  6. CodeForces 710B Optimal Point on a Line

    递推. 先对$a[i]$进行从小到大排序. 然后计算出每个点左边所有点到这个点的距离之和$L[i]$,以及右边每个点到这个点的距离之和$R[i]$. 这两个都可以递推得到. $L\left[ i \r ...

  7. iosAPP打包上架xcode中Archive提交成功以后，不提示构建版本问题

    最近在项目更新时遇到Archive提交到开发者中心成功后,一直不提示构建版本信息,可能导致的原因是由于ios10以后对于APP中调用手机相册或摄像头麦克风时需要配置plist文件,配置如下内容或许会解 ...

  8. 一个快速、高效的Levenshtein算法实现——代码实现

    在网上看到一篇博客讲解Levenshtein的计算,大部分内容都挺好的,只是在一些细节上不够好,看了很长时间才明白.我对其中的算法描述做了一个简单的修改.原文的链接是:一个快速.高效的Levensht ...

  9. js的兼容技巧

    javascript原生代码中经常会遇到各式各样浏览器不兼容的问题,浏览器真是倔强,解决浏览器的兼容是前端猿们的一大难题 为了避免在工作中遇到这些简单的问题.节约开发时间,在这里总结一些常用的浏览器兼 ...

  10. 解决Mac Linux USB Loader“Couldn't get security scoped bookmarks”错误

    Mac Linux USB Loader出现 "Couldn't get security scoped bookmarks"错误时, 需要删除 ~/Library/Contain ...