Comment utiliser l'objet FileReader pour obtenir le code de l'image-js tutoriel-php.cn

Comment utiliser l'objet FileReader pour obtenir le code de l'image

不言

Libérer： 2018-07-18 17:29:30

original

1760 Les gens l'ont consulté

Cet article vous présente comment utiliser l'objet FileReader pour obtenir le code de l'image base64 et en prévisualiser. Les amis dans le besoin peuvent s'y référer.

Utilisez FileReader pour obtenir l'image base64 et prévisualisez-la sur la page :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- 上传图片的input 绑定onchange事件-->
    <form action="">
        
        <input type="file" onchange="previewFile()" name="myfile" multiple="multiple"><br>
    </form>
    <!-- 预览的图片 -->
    <img src="" height="200" width="300" alt="Image preview..."/>
    <script type="text/javascript">
        
    function previewFile() {
        var preview = document.querySelector(&#39;img&#39;);
        // 选中file元素，并访问其files属性的第一个值
        var file  = document.querySelector(&#39;input[type=file]&#39;).files[0];
        //  console.log(document.querySelector(&#39;input[type=file]&#39;).files);
        //  console.log(document.querySelector(&#39;input[type=file]&#39;).files[0]);
        
        var reader = new FileReader();
        // 处理loadend事件，该事件在读取操作结束时（要么成功，要么失败）触发
        reader.onloadend = function () {
                console.log(reader.result)
                preview.src = reader.result;
        }
        // 读取指定的Blob中的内容，一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
        reader.readAsDataURL(file);    
    }
    </script>
    
</body>
</html>

Copier après la connexion

Recommandations associées :

FileReader en JS pour implémenter l'aperçu du téléchargement d'images

FileReader implémente l'aperçu local avant de télécharger des images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!