预览文件中的SVG

最新推荐文章于 2024-04-28 17:10:24 发布

linda`li

最新推荐文章于 2024-04-28 17:10:24 发布

阅读量678

点赞数

分类专栏：前端大杂烩文章标签：前端 html javascript

本文链接：https://blog.csdn.net/lindali1115/article/details/128804233

版权

前端大杂烩专栏收录该内容

12 篇文章 1 订阅

订阅专栏

以下HTML针对批量预览图片格式包含（svg/png/jpg/jpeg）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预览DEMO</title>
</head>
<body>
    <input id="browse" type="file" onchange="previewFiles()" multiple />
    <div id="preview"></div>
    <text></text>
    <script>
       function previewFiles() {
            const preview = document.querySelector('#preview');
            const files = document.querySelector('input[type=file]').files;
            function readAndPreview(file) {
                //校验图片格式（支持JPG,JPEG,PNG,GIF,SVG）
                if (/\.(jpe?g|png|gif|svg)$/i.test(file.name)) {
                const reader = new FileReader();
                reader.addEventListener("load", () => {
                    const image = new Image();
                    image.height = 100;
                    image.title = file.name;
                    image.src = this.dataURLtoBlob(reader.result)
                    preview.appendChild(image);
                }, false);
                    reader.readAsDataURL(file);
                }
            }
            if (files) {
                Array.prototype.forEach.call(files, readAndPreview);
            }
        }
        //base64转Blob
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return URL.createObjectURL(new Blob([u8arr], { type: mime }))
        }
    </script>
</body>

</html>