具体说明代码呈现，感兴趣的可以自行运行查看效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<img id=‘img‘ src="" width="100px" height="100px">
<input type="file" name="" id="tu" value="" style="" />
<button type="button" id=‘btn‘>上传</button>
<script src="js/mui.js"></script>
<script type="text/javascript">
// mui.init()
btn.onclick=function(){
//获取上传文件信息
var fileobj=document.getElementById(‘tu‘).files[0]
// console.log(fileobj)
//读取文件
var reader=new FileReader()
//把文件读取成text文本
// reader.readAsText(fileobj)
//把文件地址读取出来
reader.readAsDataURL(fileobj)
//读取成二进制
// reader.readAsArrayBuffer(fileobj)
// reader.readAsBinaryString(fileobj)
//读取完成(读取完成后才能console出信息)
reader.onload=function(){
//查看结果
console.log(‘文本/路径/二进制/二进制字符串‘,reader.result)
var imgurl=reader.result
document.getElementById(‘img‘).src=imgurl
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/Dark-fire-liehuo/p/10371984.html
时间： 2024-10-11 08:01:11