Web调用安卓,苹果手机摄像头,本地图片和文件

本文提供了一个完整的HTML页面内容,用于实现手机拍照功能的记账WAP,支持Chrome和Safari浏览器。展示了如何通过HTML、CSS、JavaScript实现文件上传和预览,特别适用于移动设备。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于要给一个客户做一个记账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浏览器效果:


拍照效果:



在 UniApp 中,`uni.chooseImage` 的 `sourceType` 属性用于指定图片来源,支持的值包括 `album`(从相册选择) `camera`(使用相机拍摄)。该属性本身并不区分安卓 iOS 设备,其基本行为在不同平台上的表现是一致的。然而,由于安卓 iOS 系统本身的差异,实际使用过程中可能会存在一些行为上的细微区别。 例如,在某些安卓设备上,当 `sourceType` 设置为 `camera` 时,系统可能会默认打开后置摄像头,而部分设备也可能支持前置摄像头的选择,但这取决于设备制造商对相机应用的实现方式。相比之下,iOS 设备在调用相机时的行为更加统一,通常会根据应用的权限用户设置来决定打开前置还是后置摄像头。 此外,对于 `sourceType` 设置为 `album` 时,不同平台可能在相册界面的展示形式可选文件类型上有所不同。例如,某些安卓设备允许用户从文件管理器中选择图片,而 iOS 则严格限制在 Photos 应用内的选择[^1]。 ### 代码示例 以下是一个简单的 `uni.chooseImage` 使用示例,展示了如何设置 `sourceType` 属性: ```javascript uni.chooseImage({ count: 1, // 默认只能选一张 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图 sourceType: ['album', 'camera'], // 从相册选择或使用相机拍摄 success: function (res) { const tempFilePaths = res.tempFilePaths; // 成功选择后的处理逻辑 console.log('Selected image path:', tempFilePaths); }, fail: function (err) { console.error('Failed to choose image:', err); } }); ``` ### 注意事项 - 如果需要更精细地控制摄像头(如直接调用前置摄像头),可以考虑使用 `uni.createCameraContext` 或者 `<camera>` 组件,但需要注意这些方法在 H5 App 端的支持情况[^1]。 - 对于需要兼容多个平台的应用,建议进行充分的测试,以确保在不同设备上的表现符合预期。 ### 相关问题 1. 如何在 UniApp 中使用 `<camera>` 组件调用前置摄像头? 2. `uni.chooseMedia` 接口如何判断用户是从相册选择还是使用相机拍摄? 3. 在 UniApp 中,`uni.previewImage` 方法有哪些常见的使用场景? 4. `uni.chooseImage` 的 `count` 属性在 H5 平台上的限制是什么? 5. 如何处理 `uni.chooseImage` 在不同安卓设备上的行为差异?
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值