zoukankan      html  css  js  c++  java
  • js File 转 Base64 图片预览

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>图片预览</title>
            <style type="text/css">
                .global {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                }
                .count {
                    width: 1000px;
                    height: 300px;
                    border: 2px solid deepskyblue;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
                .count div{
                    width: 30%;
                    height: 50%;
                    border: 1px solid fuchsia;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .count div img{
                    height: 70%;
                }
                input {
                    display: block;
                }
            </style>
        </head>
        <body>
            <div class="global">
                <div class="count">
                    <div>
                        <input type="file" name="file" id="file">
                        <img src="" alt="" id="imgs">
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                // 文件类型转换
                // File 转 Base64 图片预览
                const fileToBase64 = (file, callback) =>{
                    const reader = new FileReader()
                    reader.onload = function(evt){
                       if(typeof callback === 'function') {
                            callback(evt.target.result)
                        } else {
                            console.log("我是base64:", evt.target.result);
                        }
    
                    }
                    /* readAsDataURL 方法会读取指定的 Blob 或 File 对象
                    ** 读取操作完成的时候,会触发 onload 事件
                    *  result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
                    */ 
                    reader.readAsDataURL(file);
                }
                // 
                
                let _files = document.getElementById('file')
                _files.addEventListener('change',function(e){
                    console.log(e.target.files[0])
                    let file = e.target.files[0] // file对象
                    const base64 = fileToBase64(file,base64 => {
                        let imgs = document.getElementById('imgs')
                        imgs.src = base64
                    })
                })
                
                
            </script>
        </body>
    </html>
  • 相关阅读:
    0325JavaScript
    0322css样式表,选择器
    0320表单
    0313函数
    0312数组
    0311类
    0309笔记整理
    进制转换
    Xcode快捷键大全
    Android LearningNotes
  • 原文地址:https://www.cnblogs.com/llive/p/15061459.html
Copyright © 2011-2022 走看看