上传控件问题，选择好图片后，如何让它立即显示图片？

参考
http://www.y7l8.com/2009/06/07/firefox-%E5%A4%9A%E6%B5%8F%E8%A7%88%E5%99%A8-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87-%E6%9C%AC%E5%9C%B0%E9%A2%84%E8%A7%88.htmlFileUpload控件在客户端是input type=file

在FileUpload调用一个onchange="CheckImg(this)"
js代码
function CheckImg(FileUpload)
{
        var mime=FileUpload.value;

        mime=mime.toLowerCase().substr(mime.lastIndexOf("."));
        if(mime!=".jpg" && mime!=".gif" && mime!=".png")
        {
            alert("仅支持JPG,GIF,PNG格式的图片");
            document.getElementById("HiddenField1").value="";
            return;
        }
        document.getElementById("HiddenField1").value=FileUpload.value;
        show();
}
function show()
{
if(document.getElementById("HiddenField1").value!="")
{

document.getElementById("proImage").src=document.getElementById("HiddenField1").value;
}
}
然后就能实现图片预览了

C:\a.jpg不能显示出来？
奇怪了，虽然可以得到地址，但这样的C:\a.jpg不支持？需要那种/a.jpg这种URL？

<input id="File1" type="file" runat="server" onchange="return fileshow()" />function fileshow()
{
document.getElementById("i").src=document.getElementById("File1").value;
}

document.getElementById("proImage").src="file://"+document.getElementById("HiddenField1").value;

    function GetImage(FileUpload)
    {
        document.getElementById("image_").src = "file://" + FileUpload.value;
    }还是不行……

[Quote=引用 7 楼 hdt 的回复:]
一定要放到“HiddenField1”吗？

                <input type="file" onchange="PreviewImg(this)" id="upimg" runat="server" style="width: 243px;border-style:inset" /
        function PreviewImg(imgFile) {
            var mo_InvheadPicN = "<%=mo_InvheadPic1 %>";
            var mo_InvheadPicY = "<%=mo_InvheadPic2 %>";
            if (imgFile.value == "") {
                var message = " <img src=" + mo_InvheadPicN + " /><font color=red>请上传头像图片</font>";
                document.getElementById("LbMessage").innerHTML = message;
                return;
            }
            var ext = imgFile.value.toLowerCase().substring(imgFile.value.length - 3, imgFile.value.length);
            if (ext == "jpg" || ext == "gif" || ext == "bmp") {
                var newPreview = document.getElementById("newPreview");
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
                newPreview.style.width = "156px";
                newPreview.style.height = "82px";
                document.getElementById("imgkf").style.display = "none";
                document.getElementById("newPreview").style.display = "block";
            }
        }
给你个例子看看我是加了个div

我是用ASP.NET的FileUpload，不是用HTML的 File。

<asp:FileUpload ID="FileUpload1" runat="server" Width="266px" />
FileUpload1.Attributes.Add("onchange", "javascript:View(this);");    function GetImage(FileUpload)
    {
        document.getElementById("loadimage").src = "file://" + FileUpload.value;
    }<img id="loadimage" alt="" src=""  width="30px" height="30px"/>

img src="file:///G|/MyDocuments/My Pictures/a.gif" width="128" height="128" />看来要转成这种格式才能显示？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function display()
{
debugger;
var img = document.getElementById("img");
var pvimg =document.getElementById("pvimg");
pvimg.src = "file://"+img.value;
alert(img.value);
}
</script>
</head><body>
<img id="pvimg" />
<input  type="file"  id="img"/>
    <p>
    <input type="button"  onclick="display()" value="test" />
</body>
</html>

奇怪了！我用<asp:FileUpload ID="FileUpload_1" runat="server" Width="266px" />不行……

以前是可以采用src = 本地路径来预览的，但现在不行了，需要更改IE的设置才可以这样操作。在IE类型的浏览器中，可以采用滤镜的方式来解决图片预览的问题。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="测试.aspx.cs" Inherits="Course.测试" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    function ImageXXX(file)
    {
        var myimg = document.getElementById("img1");
        myimg.src="file://"+file.value;
        alert(myimg.src);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:FileUpload ID="FileUpload1" runat="server"  onchange="ImageXXX(this)"/>
        <img alt="" src="" id="img1" /></div>
    </form>
</body>
</html>

但是到了FireFox用虑镜不行了。

要用滤镜。你看看这个文章，对你应该有帮助
http://www.cnblogs.com/bzz/archive/2008/01/25/1053073.html而且测试通过了的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function display()
{
debugger;
var img = document.getElementById("img");
var pvimg =document.getElementById("pvimg");
pvimg.src = "file://"+img.value;
alert(img.value);
}
</script>
</head><body>
<img id="pvimg" />
<input  type="file"  id="img" onchange="display()"/>
    <p>
    <input type="button"  onclick="display()" value="test" />
</body>
</html>

要ASP.NET代码的。楼上的可以通过，但换到ASP.NET又不行了。控件不是用“TYPE = FILE”那个。是用ASP.NET的FileUpload。

FIleUpload只是一个服务端控件,在运行时转成HTML的时候会转成type="file"的

个人认为你现实不出来是因为你用的绝对路径应该用 xx.jpg 相对路径因为是在客户端预览你先想一下是怎么设置图片URL的？

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="测试.aspx.cs" Inherits="Course.测试" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">

    function display()
{
    debugger;
    var img = document.getElementById("img");
    var pvimg =document.getElementById("pvimg");
    pvimg.src = "file://"+img.value;
    alert(img.value);
}    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img id="pvimg" />
    <input  type="file"  id="img" onchange="display()"/>
    <p>
    <input type="button"  onclick="display()" value="test" />     </form>
</body>
</html>
在ASPX页里失败…… 这代码。

onpropertychange = "display()"

你如果在服务器上那是不可能的，除非不是用ASP.NET 实现，要不然不可能
现在是想上传前，先预览。你如果只是在客户端建个HTML 用file input时可以的即你直接双击预览（没有发布到服务器上）上面的问题你不是发现了吗
不可以

调试易

上传控件问题，选择好图片后，如何让它立即显示图片？

解决方案 »