Fileupload控件点击“浏览”按钮，选择图片后需要立即显示所选择的图片

最新推荐文章于 2026-06-15 09:18:32 发布

转载最新推荐文章于 2026-06-15 09:18:32 发布 · 5k 阅读

标签

#asp.net #.net #javascript #控件

javascri 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在IE6浏览器中实现图片预览功能时遇到的问题及解决方案，通过使用特定的CSS样式和JavaScript函数，实现了文件上传控件选择图片后的即时预览。

function showimg()
{
document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %>").value;
}
</script>HTML:
<asp:Image ID="Image1" runat="server" Width="150px" Height="200px"></asp:Image>
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" />
经过测试，在一些机器上能立即显示图片，但有些机器上却不显示图片。我不知道是不是跟浏览器的安全设置有关。怎么解决？

解决方案 »

问题是家里是ie6可以的，当公司也是IE6就是显示不出来。而且我右键图片->属性,显示的文件名也是我Fileupload控件所选中的图片名
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" /> 函数用的有问题吧??你第一次获取焦点时为空,当然无法显示图片了
<script>function PreviewImg(imgFile){ var ext = imgFile.value.toLowerCase().substring(imgFile.value.length-3,imgFile.value.length); if(ext=="jpg"||ext=="png"||ext=="gif"||ext=="bmp") { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "120px"; newPreview.style.height = "90px"; }}</script><div id="newPreview"></div><input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" />
<style type="text/css"></style>少了这个css样式
楼上的方法测试成功！不过，我原本之所以放了个asp:Image ,是因为页面（是编辑页面）装载的时候，Image 需要从数据库读取一个URL，并显示。然后用户可以点击Fileupload控件选取其他图片，按楼上的方法，我这边实现不是很方便。有方法解决吗？
再加一个div，js函数里，隐藏掉div就可以了。
<div id="newPreview"> </div> <div id="oldPreview"> </div> <input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" /> js函数if块里增加一句document.getElementById("oldPreview").style.display = "none";应该可以的呢.

复制过来的效果不好：原文地址：http://www.debugease.com/aspdotnet/612817.html

我自己的核心代码

<asp:Image ID="Image1" runat="server" Height="181px" Width="221px" 
                        BorderColor="#000001" ImageUrl="~/admin/UserPhoto/201404272323258370.jpg"/>
<div id="newPreview"></div>

<asp:FileUpload ID="FileUpload1" runat="server" onchange="previewPic()" />

css代码

  #newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}

js代码

 function previewPic() {
            var filePath = $("#FileUpload1");
            var picPath = $("#Image1");
            //if (!filePath || !filePath.value || !picPath) return;
            var extensionName = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
            if (extensionName.test(filePath.val())) {
                var newPreview = document.getElementById("newPreview");
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = filePath.val();
                newPreview.style.width = "120px";
                newPreview.style.height = "90px";
                $("#Image1").remove();

            }
            else {
                alert("您选择的似乎不是图像文件。");
            } 
        }