zoukankan      html  css  js  c++  java
  • Web APIs

    FileReader.readAsDataURL()

    The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

    Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.

    Syntax

    instanceOfFileReader.readAsDataURL(blob);
    

    Parameters

    • blob

      The Blob or File from which to read.


    选择、读取单个文件并预览

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <input type="file" />
            <br />
            <img src="" height="200" alt="Image preview..." />
    
            <script type="text/javascript">
                const input = document.querySelector('input[type=file]')
                const image = document.querySelector('img')
                
                console.log(input, image)
                
                input.onchange = (event) => {
                    // console.log(event)
                    const files = event.target.files
                    
                    if (files.length > 0) {
                        const fileReader = new FileReader()
                        
                        fileReader.onload = (event) => {
                            // console.log(event)
                            image.src = fileReader.result
                        }
                        
                        fileReader.readAsDataURL(files[0])
                    }
                }
            </script>
        </body>
    </html>
    

    选择、读取多个文件并预览

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Reading multiple files</title>
        </head>
        <body>
            <input type="file" multiple />
            <br />
            <div id="preview"></div>
    
            <script type="text/javascript">
                const input = document.querySelector('input[type=file]')
                const preview = document.querySelector('#preview')
    
                console.log(input, preview)
    
                input.onchange = (event) => {
                    // console.log(event)
                    const files = event.target.files
    
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i]
    
                        if (/.(jpe?g|png|gif)$/i.test(file.name)) {
                            const fileReader = new FileReader()
                            
                            fileReader.addEventListener("load", function(event) {
                                console.log(event, this)
                                const image = new Image()
                                image.height = 100
                                image.title = file.name
                                image.style = "margin-right: 5px;"
                                image.src = this.result
                                preview.appendChild(image)
                            }, false)
                            
                            fileReader.readAsDataURL(file)
                        }
                    }
                }
            </script>
        </body>
    </html>
    

    参考

    FileReader.readAsDataURL()

  • 相关阅读:
    spring 定时任务 taskScheduler详解
    shiro.ini 配置详解
    nginx : server_name localhost 和 chrome : Provisional headers are shown
    参数文件管理
    归档日志管理
    日志文件管理
    控制文件管理
    数据文件管理
    OGG配置参数样例
    OGG配置案例一(源表与目标表结构一致)
  • 原文地址:https://www.cnblogs.com/Satu/p/14645309.html
Copyright © 2011-2022 走看看