zoukankan      html  css  js  c++  java
  • 前端文件上传读取方法(头像上传)

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

    <!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>
  • 相关阅读:
    Json的序列化与反序列化
    RelativeSource设定绑定方向
    Java导出Excel工具类
    CentOS配置ssh免密码登录
    CentOS为用户增加root权限
    CentOS安装RabbitMQ步骤
    CentOS配置主机名和主机映射
    CentOS配置静态IP
    Java执行系统命令工具类(JDK自带功能)
    Linux定时任务
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10371984.html
Copyright © 2011-2022 走看看