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

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" οnfοcus="showimg()" type="file"  name="File1" runat="server" />
经过测试，在一些机器上能立即显示图片，但有些机器上却不显示图片。我不知道是不是跟浏览器的安全设置有关。怎么解决？

解决方案 »

1. 问题是家里是ie6可以的，当公司也是IE6就是显示不出来。而且我右键图片->属性,显示的文件名也是我Fileupload控件所选中的图片名
     

2. <input id="File1" style="width: 489px; height: 22px" οnfοcus="showimg()" type="file"  name="File1" runat="server" /> 函数用的有问题吧??你第一次获取焦点时为空,当然无法显示图片了
     

3. <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" οnchange="PreviewImg(this)" id="upimg" runat="server" />
     

4. <style type="text/css"><!--#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}--></style>少了这个css样式
     

5. 楼上的方法测试成功！不过，我原本之所以放了个asp:Image ,是因为页面（是编辑页面）装载的时候，Image 需要从数据库读取一个URL，并显示。然后用户可以点击Fileupload控件选取其他图片，按楼上的方法，我这边实现不是很方便。有方法解决吗？
     

6. 再加一个div，js函数里，隐藏掉div就可以了。
     

7. <div id="newPreview"> </div> <div id="oldPreview"> </div> <input type="file" οnchange="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" οnchange="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("您选择的似乎不是图像文件。");
            } 
        }