HTML5图像预览，Html Input File Preview 选择后立即预览兼容IE,Firefox,Chorom等主流浏览器

最新推荐文章于 2025-05-22 11:07:12 发布

原创最新推荐文章于 2025-05-22 11:07:12 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #JS #Input #File

File 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript实现的图片预览功能。通过使用FileReader API和jQuery, 用户可以在上传图片后立即预览到该图片。此功能适用于现代浏览器，并提供了一种向后兼容的方法以支持IE浏览器。

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

<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto"  />

$(document).ready(function (e) {
            $("#uploadImage").change(function(){
                var ua = navigator.userAgent;
                if(ua.indexOf("MSIE")>-1)//IE浏览器
                {
                    document.getElementById("uploadPreview").src=document.getElementById("uploadImage").value;
                }
                else
                {
//支持html5 中的写法 
 var oFReader = new FileReader();
                    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

                    oFReader.onload = function (oFREvent) {
                        document.getElementById("uploadPreview").src = oFREvent.target.result;
                    };
                }
            });
        });