具体说明代码呈现，感兴趣的可以自行运行查看效果：
<!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