html5通过浏览器调用手机相机

最新推荐文章于 2024-06-22 15:47:20 发布

原创最新推荐文章于 2024-06-22 15:47:20 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个网页中通过点击头像来触发图片上传的功能实现方式，包括相机拍摄照片自动上传及从相册选择图片上传的问题。提供了HTML表单代码示例，并指出相册选择图片上传时遇到的问题。

基本需求，是点击网页中头像图片，弹出提示：手机、相册、文件管理器……

相机拍照后，自动上传图片。不知道为什么，相册选择的图片无法正常上传。

<form id="form1" action="3.php" method="post" enctype="multipart/form-data" target="hidden_frame">
<input type="file" id="upfile" name="upfile" accept="image/*" class="up_input" onchange="form1.submit()" ><span class="up_icon"></span>
<input type="submit" />
</form>
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
<style type="text/css">
.up_icon,.up_input {position: absolute;top: 10px;left: 110px;width: 64px;height: 64px;z-index: 2}
.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(/data/upload/shop/common/default_user_portrait.gif) no-repeat 0 0;z-index: 1;}
</style>
<script type="text/javascript">
upfile.style.opacity = "0";
</script>

参考：http://www.webhek.com/browser-camera