移动端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 ipad
var 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 将文件读取为 DataURL
readAsText 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>
批量上传图片
注意在input输入框上添加了multiple这个属性
<!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" multiple>
<input type="button" value="上传" id="btnSubmit">
<div class="photo" id="preview"></div>
</body>
</html>
<script>
let uploadImg = document.getElementById('uploadImg'),
preview = document.getElementById('preview'),
btnSubmit = document.getElementById('btnSubmit'),
imgUrlList = [];
uploadImg.addEventListener('change', addFileImg, false);
btnSubmit.addEventListener('click', submitImg, false); //上传按钮
// 拍照选择完成的回调
function addFileImg() {
imgUrlList = [];
preview.innerHTML = '';
// 获取当前图片信息（单张图片上传）
let selected_file_list = uploadImg.files;
for (const key in selected_file_list) {
if (Object.hasOwnProperty.call(selected_file_list, key)) {
const selected_file_item = selected_file_list[key];
// 获取base64编码
handleFileImg(selected_file_item, (base64) => {
imgUrlList.push(base64);
let img = new Image();
img.src = base64;
preview.appendChild(img);
});
}
}
}
// 根据文件对象，返回base64编码
let handleFileImg = (selected_file_item, callBack) => {
// 为了获取图片的本地路径
window.URL = window.URL || window.webkitURL;
//判断文件类型是否为图片
if (!selected_file_item.type.match(/image.*/)) return false;
let reader = new FileReader();//简单来说就是异步读取电脑中的文件
reader.readAsDataURL(selected_file_item);
reader.onload = (e) => callBack(e.target.result);
}
// 上传base64编码到后台
function submitImg() {
// 根据公司需要自行修改
imgUrlList.forEach(item => ajax(item.substr(imgurl.indexOf(',') + 1)))
}
let ajax = (dataurl) => {
let 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>
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
