html之file标签 --- 图片上传前预览 -- FileReader

最新推荐文章于 2025-07-02 08:00:00 发布

原创

最新推荐文章于 2025-07-02 08:00:00 发布 · 7.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何利用HTML的File标签和JavaScript的FileReader接口实现图片上传前的预览功能。通过readAsDataURL方法将图片转换为base64字符串展示在页面上。此外，还提到了FileReader的readAsBinaryString和readAsText方法用于读取文件为二进制和文本格式。最后，展示了如何使用a标签的download属性实现图片下载。

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

　记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的<input type="file"/>标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。

　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。

1、闲话少说，测试一下，图片上传前预览(选择图片)：

实现代码：

<div style="border:2px dashed red;">
            <p>
                图片上传前预览：<input type="file" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/>
                <input type="button" value="隐藏图片" onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
                <input type="button" value="显示图片" onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
            </p>
            <img id="xmTanImg"/>
            <div id="xmTanDiv"></div>
        </div>
        <hr />
        <script type="text/javascript">            
            //判断浏览器是否支持FileReader接口
            if (typeof FileReader == 'undefined') {
                document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
                //使选择控件不可操作
                document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
            }

            //选择图片，马上预览
            function xmTanUploadImg(obj) {