原生js调用手机拍照功能

原生js调用手机拍照功能

    此功能主要用于混合App开发时手机拍照上传图片的功能!

话不多说直接上代码!
注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以!

// html部分
//主要就是给他一个点击事件,来触发上传的事件
<img class="head-img mui-action-preview" id="head-img1" src="" onclick="sahngchang()" style="width: 100px;height: 100px;background: red;"/>

//javascript部分
//			document.querySelector('#head-img1').addEventListener('tap', function() {
				function sahngchang(){
				console.log(2222)
				var buttonTit = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "上传图片",
					cancel: "取消",
					buttons: buttonTit
				}, function(b) { /*actionSheet 按钮点击事件*/
					switch(b.index) {
						case 0:
							break;
						case 1:
							getImage(); /*拍照*/
							break;
						case 2:
							galleryImg(); /*打开相册*/
							break;
						default:
							break;
					}
				})
			}

			//拍照
			function getImage() {
				var cmr = plus.camera.getCamera(1); //获取后面的摄像头
				cmr.captureImage(function(p) {

					//拍照成功,返回路径 p,但是不是绝对路径
					//通过p,读取图片文件
					var wt = plus.nativeUI.showWaiting();
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						//entry为获取的文件,.file()方法可以获取该文件的文件名、大小等信息,返回包含文件信息的对象
						entry.file(function(file) {
							// alert("getFile:" + JSON.stringify(file));
							var fileReader = new plus.io.FileReader(); //开启读取文件
							fileReader.readAsDataURL(file, 'utf-8'); //将文件数据对象信息file进行url base64编码
							fileReader.onloadend = function(evt) {
								//压缩图片
								wt.close();
								$('#head-img1').attr('src', evt.target.result)
								alert(evt.target.result)
								$.ajax({
									url: "/api/papers/upload",
									type: "post",
									dataType: 'json',
									data: {
										file: evt.target.result
									},
									success: function(data) {
										var dataS = JSON.stringify(data);
										if(data.code == 1) {
											$('#head-img1').attr('src', data.src)
											wt.close(); //关闭等待提示按钮
										} else {
											alert(data.msg)
										}

									}

								});

							}
						})
					}, function(e) {
						alert(e.message);
					});
				}, function(e) {}, {
					filename: "_doc/camera/"
				}); //拍照
			}

			//从相册选择
			function galleryImg() {
				plus.gallery.pick(function(p) {
					var wt = plus.nativeUI.showWaiting();
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						entry.file(function(file) {
							var fileReader = new plus.io.FileReader(); //开启读取文件
							fileReader.readAsDataURL(file, 'utf-8');

							fileReader.onloadend = function(evt) {
								$('#head-img1').attr('src', evt.target.result)
								$.ajax({
									url: "www.baidu.com",//根据具体提供的接口
									type: "post",
									dataType: 'json',
									data: {
										file: evt.target.result
									},
									success: function(data) {
										var dataS = JSON.stringify(data);
										if(data.code == 1) {
											$('#head-img1').attr('src', data.src)
											wt.close(); //关闭等待提示按钮
										} else {
											alert(data.msg)
										}

									}

								});

							}

						})

					})

				});
			}
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要实现在手机端上传身份证并提交表单的功能,可以使用原生 JavaScript编写以下代码: HTML部分: ``` <form id="myForm" enctype="multipart/form-data"> <input type="file" accept="image/*" capture="camera" id="idcard" name="idcard" /> <button type="button" onclick="submitForm()">提交</button> </form> ``` JavaScript部分: ```javascript function submitForm() { let formData = new FormData(); // 创建FormData对象 let fileInput = document.getElementById("idcard"); if (fileInput.files.length > 0) { let file = fileInput.files[0]; formData.append("idcard", file); // 将文件添加到FormData对象中 } // 发送表单数据 let xhr = new XMLHttpRequest(); xhr.open("POST", "submit_url", true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 请求成功的处理代码 console.log(xhr.responseText); } }; xhr.send(formData); // 发送FormData对象 } ``` 以上代码中,表单中的文件输入框为`<input type="file">`,通过`capture="camera"`属性可以直接调用手机相机进行拍照或选择相册中的图片。使用`accept="image/*"`限制只能选择图片文件。点击提交按钮时,会调用`submitForm`函数。 函数内部,首先创建一个`FormData`对象用于存储表单数据。然后,从文件输入框中获取选中的文件对象,并将其添加到`FormData`对象中,使用`append`方法。在`xhr`对象上调用`open`方法打开一个POST请求,并设置请求地址。然后,通过`onreadystatechange`函数监听请求状态和响应。最后,使用`send`方法发送`FormData`对象。 你需要将"submit_url"替换为实际的提交地址。在请求成功时,可以根据需要处理响应数据。通过控制台打印`xhr.responseText`,你可以查看服务器返回的内容。 请注意,上传文件可能需要服务器端的相应配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值