<!DOCTYPE html>
<html>
<head>
<title>html5上传后立即显示</title>
<script type="text/javascript">
function ProcessFile(e) {
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;//将图片base64字符串赋值给img的src
// console.log(txt);
document.getElementById("result").appendChild(img);
};
}
reader.readAsDataURL(file);
}
function contentLoaded() {
document.getElementById('file').addEventListener('change',
ProcessFile, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
</script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
<div><img src="1.jpg"></div>
</body>
</html>
效果:
html5上传图片后立即显示出来
最新推荐文章于 2024-06-05 16:05:16 发布