html上传图片后，在页面显示上传的图片代码,Css代码库,德仔网

代码语言

代码分类

【Css】 html上传图片后，在页面显示上传的图片

作者:铠铭 / 发布于2019/10/24/ 1219

<!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>

试试其它关键字

同语言下

可能有用的

铠铭贡献的其它代码(10)