前端文件上传读取方法（头像上传）

最新推荐文章于 2024-02-19 17:43:37 发布

weixin_30386713

最新推荐文章于 2024-02-19 17:43:37 发布

阅读量186

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/Dark-fire-liehuo/p/10371984.html

版权

具体说明代码呈现，感兴趣的可以自行运行查看效果：

<!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.οnclick=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.οnlοad=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

weixin_30386713

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端文件上传读取方法（头像上传）

具体说明代码呈现，感兴趣的可以自行运行查看效果：<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content...
复制链接

扫一扫