FileUpload控件预览图片

最新推荐文章于 2017-12-13 21:52:22 发布

转载最新推荐文章于 2017-12-13 21:52:22 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuyanpeng/p/4691996.html

本文介绍了一种在ASP.NET中实现文件上传后即时预览图片的方法。通过使用HTML的`<img>`标签和`<div>`元素结合JavaScript，可以在用户上传图片后立即显示预览效果。建议使用`<div>`方式预览以提高兼容性。

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

HTML代码：

<tr>
                            <td class="auto-style1">上传图片：</td>
                            <td>
                                <asp:FileUpload ID="FileUpload1" runat="server" onchange="chgImg(this)" />
                                <div>
                                    <img src="" id="Photo" runat="server" style="max-height: 80px" />
                                </div>
                                <div id="preview"></div>
                                <p>图片路径：<asp:Label ID="lalimageUrl" runat="server" Text=""></asp:Label></p>
                            </td>
                        </tr>

View Code

JS代码：

function chgImg(file){
//img控件预览图片
        var FileUpload1 = $("#FileUpload1").val();
        $("#Photo").attr("src", "file:///" + FileUpload1);
    //div预览图片（兼容模式）
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="max-height:80px" />';
            }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            prevDiv.innerHTML = '<div class="img" style="max-height:80px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\')"></div>';
        }
}

View Code

实现效果，如图所示：

本文是实现了两种预览图片的形式，img控件展示和div展示希望对大家有所帮助！

ps:建议选择div的展示好一些，兼容性要好。

转载于:https://www.cnblogs.com/liuyanpeng/p/4691996.html