移动端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>
