<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
.upload-label{
display: inline-block;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
border: 1px solid #555;
}
</style>
</head>
<body>
<form id="uploadForm">
<div class="photograph">
<label class="upload-label" for="upload">拍照</label>
<ul class="photographName"></ul>
</div>
</form>
<script>
/*处理安卓和ios的兼容性*/
var upload = '';
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*' multiple='multiple' style="display: none">`;
} else if (/android/.test(ua)) {
upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*' capture='camera' multiple='multiple' style="display: none">`
}else{
upload = `<input type='file' id='upload' name="idcard" form="uploadForm" accept='image/*' capture='camera' multiple='multiple' style="display: none">`
}
$('.photograph').append(upload);
/*拍照事件*/
$("body").delegate("#upload", "change", function () {
var _this = this;
var file = this.files;
for (var i = 0; i < 1; i++) {
reads1(file[i], _this);
}
});
function reads1(file, _this) {
var img = '';
var url = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
};
img += `<li><img src=${url} alt=""><i class="close"></li>`;
$('.photographName').append(img)
}
/*上传照片*/
function uploadForm() {
var uploadPath = '';
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url:"url",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
},
error: function () {
}
});
}
</script>
</body>
</html>
