<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照</title>
<style type="text/css">
img {
border: 1px solid #ccc;
min-width: 100px;
min-height: 100px;
}
</style>
</head>
<body>
<p>上传区</p>
<input name="files" type="file" accept="image/*" onchange="preview(this)" />
<p>预览区</p>
<img src="" id="img">
<script>
function preview(input) {
var url = '';
//预览路径
if (window.createObjectURL != undefined) {
url = window.createObjectURL(input.files[0]);
} else
if (window.URL != undefined) {
url = window.URL.createObjectURL(input.files[0]);
} else
if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(input.files[0]);
}
document.getElementById('img').src = url
}
</script>
</body>
</html>