本地图片预览+blob使用

最新推荐文章于 2025-06-07 19:59:47 发布

原创

最新推荐文章于 2025-06-07 19:59:47 发布 · 1.4w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #本地预览

本文介绍了如何利用HTML5的File标签和Blob对象实现本地图片预览。方法一是通过file标签，方法二是将图片的arrayBuffer转换为Blob对象，并创建URL进行预览。此外，还提及了如何处理ArrayBuffer内容以实现显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：做要用到file标签和 html5 Blob对象

方法1：使用file标签

<label>请选择一个文件：</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick = "readAsDataURL()"/>

// 将文件以Data URL形式进行读入页面
    function readAsDataURL(){
        // 检查是否为图像类型
        var simpleFile = document.getElementById("file").files[0];
        if(!/image\/\w+/.test(simpleFile.type)) {
            alert("请确保文件类型为图像类型");
            return false;
        }
        var reader = new FileReader();
        // 将文件以Data URL形式进行读入页面
        reader.readAsDataURL(simpleFile);
        reader.onload = function(e){
            console.log(this.result);
            result.innerHTML = '<img src="'+this.result+'" alt=""/>';
        }
    }