前端文件上传读取方法（头像上传）
Posted dark-fire-liehuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端文件上传读取方法（头像上传）相关的知识，希望对你有一定的参考价值。
具体说明代码呈现，感兴趣的可以自行运行查看效果：
<!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>
以上是关于前端文件上传读取方法（头像上传）的主要内容，如果未能解决你的问题，请参考以下文章