废话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传文件</title>
</head>
<style>
#content{width:200px;}
</style>
<body>
<form action="">
<input type="file" id="myfile" multiple onchange="loadfile()"/>
<button type="submit">
提交
</button>
<div id="content"></div>
</form>
</body>
</html>
<script>
var myfile = document.getElementById('myfile');
var fReader = new FileReader();
var con = document.getElementById('content');
fReader.onload= function(e){
//以图片的形式放到div 中;
var str = '<img src="'+ e.target.result+'" width="100%">';
con.innerHTML += str;
}
function loadfile(){
//返回url 数据结果
fReader.readAsDataURL(myfile.files[0]);
console.log(fReader);
}
</script>成品截图
