移动端h5实现手机拍照上传图片，相册选择上传图片input type=file

有不足或者不对的在下方留言，有不明白的也请在下方留言，虽然我不一定能看到，话不多说上代码，注释都写好了

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片上传</title><style>#preview {width: 100%;padding: 20px;box-sizing: border-box;}#preview img {width: 100%;height: auto;}</style>
</head>
<body><input type="file" accept="image/*" id="uploadImg" name="uploadImg">
<input type="button" value="上传" id="btnSubmit">
<div class="photo" id="preview"></div>
</body>
</html>
<script>var uploadImg = document.getElementById('uploadImg'),preview = document.getElementById('preview'),btnSubmit = document.getElementById('btnSubmit'),imgurl = '';uploadImg.addEventListener('change', handleFileImg, false);btnSubmit.addEventListener('click',submitImg,false); //上传按钮// 拍照选择完成的回调function handleFileImg() {// 为了获取图片的本地路径window.URL = window.URL || window.webkitURL;// 获取移动端类型Android   iPhone  ipadvar sUserAgent = navigator.userAgent.toLowerCase();// 获取当前图片信息（单张图片上传）var selected_file = uploadImg.files[0];console.log(selected_file);if (sUserAgent.match(/android/i) == "android") {var img = new Image();// 生成一个本地图片展示路径img.src = window.URL.createObjectURL(selected_file);preview.innerHTML = '';// 添加到页面展示preview.appendChild(img);/*new FileReader()：方法简述一、调用FileReader对象的方法方法名 参数 描述abort none 中断读取readAsBinaryString file 将文件读取为二进制码readAsDataURL file 将文件读取为 DataURLreadAsText file, [encoding] 将文件读取为文本readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。二、处理事件事件 描述onabort 中断时触发onerror 出错时触发onload 文件读取成功完成时触发onloadend 读取完成触发，无论成功或失败onloadstart 读取开始时触发onprogress 读取中*/var reader = new FileReader();//简单来说就是异步读取电脑中的文件reader.onload = function (e) {imgurl = e.target.result;};reader.readAsDataURL(selected_file);} else {//判断文件类型是否为图片if (!selected_file.type.match(/image.*/)) return false;var img = document.createElement('img');// base64赋值 img.file = selected_file;preview.innerHTML = '';preview.appendChild(img);img.onload = function () {imgurl = img.src;};var reader = new FileReader();reader.onload = function (e) {img.src = e.target.result;};reader.readAsDataURL(selected_file);}}// 上传base64编码到后台function submitImg() {// 根据公司需要自行修改var start = imgurl.indexOf(',') + 1;dataurl = imgurl.substr(start);var xmlhttp = new XMLHttpRequest();xmlhttp.open('post', 'xxxxx', true);xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');xmlhttp.setRequestHeader('X_Requested-With', 'XMLHttpRequest');xmlhttp.send('dataurl=' + encodeURIComponent(dataurl));xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText)}}}
</script>

移动端h5实现手机拍照上传图片，相册选择上传图片input type=file相关推荐

android 手机拍照、相册选择照片并显示
关键代码: public class MainActivity extends AppCompatActivity implements View.OnClickListener {private B ...
SpringBoot项目H5界面手机拍照调用腾讯云OCR卡证识别接口完整例子
最近一个微信端项目的功能涉及一个手机拍照上传身份证识别身份证信息回显的功能,调用的接口是腾讯云OCR的卡证识别功能.看了腾讯云的api通俗易懂,本地写好了demo测试可用.H5界面手机拍照调用后台方法 ...
用input type=file调取手机照相机以及相册选择照片上传
最近由于在写一个车贷的webapp项目,其中要求调取手机照相机以及手机相册来获取照片,而我之前一直是用cordova等打包工具调取手机硬件.于是也到网上找了下解决方案.其中h5提供的type=&quo ...
android webview使用html5input id=input type=file/ 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个<input id="input" type="file"/ ...
Android 中拍照、相册选择、裁剪照片
一个多月没总结知识点了,差点连博客账号都忘了...好了,步入正题,在 Android 中调用摄像头拍照获取图片或者是从相册中选取图片是很常见的功能,比如某些 APP 上传头像的功能就是一个例子. ** ...
Unity XCode iOS 实现拍照和相册选择上传头像
显示弹窗通过UIAlertController来创建一个弹窗 #if defined(__cplusplus) extern "C" { #endif//导出接口供unity使用 ...
H5调用摄像头拍照,录音及选择文件
我们可以使用H5中的input标签来调用原生摄像头,录音及文件管理 1. 调用相机拍照: <input type="file" accept="image/*&qu ...
Android 拍照和相册选择
前几天一直在想写一个简单干净的关于Android 拍照和相册选择的dome,直到今天才有时间去写,下面是图片介绍,资源代码会有上传!供初学者学习指教(代码是Android studio) 1.控件 0 ...
android拍照所需的权限,eclipse --- Android拍照，相册选择图片以及Android6.0权限管理...
[实例简介] eclipse --- Android拍照,相册选择图片以及Android6.0权限管理 [实例截图] [核心代码] camreainandroidm └── camreainandro ...

移动端h5实现手机拍照上传图片，相册选择上传图片input type=file

移动端h5实现手机拍照上传图片，相册选择上传图片input type=file

移动端h5实现手机拍照上传图片，相册选择上传图片input type=file相关推荐

最新文章

热门文章