其他分享
首页 > 其他分享> > Web APIs - FileReader - FileReader.readAsDataURL()

Web APIs - FileReader - FileReader.readAsDataURL()

作者:互联网

目录

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


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

<!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()

标签:files,Web,const,FileReader,image,input,readAsDataURL,event
来源: https://www.cnblogs.com/Satu/p/14645309.html