asp.net 如何上传图片之前显示本地绝对路径的图片

[lsd123]

<td  rowspan="4">
			  <img alt="照片" id="imgPerson"  />
			  <input type="file" id="UpFile" runat="server"  accept="text/*" name="UpFile" onclick="ShowImage();"/>
			</td>

function ShowImage()
		{		   
		   document.getElementById("imgPerson").src= document.all.UpFile.value;   
		   
		}

这样显示不了，如何解决啊？

[BernardSun]

<input type="file" id="UpFile" runat="server"  accept="text/*" name="UpFile"  onchange="ShowImage();"/>

[周公]

<td  rowspan="4">
              <img alt="照片" id="imgPerson"  />
              <input type="file" id="UpFile" runat="server"  accept="text/*" name="UpFile" onchange="ShowImage();"/>
            </td>

function ShowImage()
        {           
           document.getElementById("imgPerson").src= document.all.UpFile.value;   
           
        }

换成onchange吧，onclick的时候就会弹出选择文件对话框了，看不到效果了。

[lsd123]

我写错了，是onchange，onchange不行的

[ReyZhang]

事件选择的不对,把onclick 改成onchange就可以了

[ReyZhang]

onchage不行的话,用onpropertychange这个应该可行

[ReyZhang]

onpropertychange能及时捕获属性值的变化，而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件！

[wuyq11]

onchange="ShowImage(tis.value,document.getelementbyId('imgPerson'));"

function ShowImage(value,img)
{

img.src=value;

}

[wuyq11]

onchange改为onfocus

[gtiroy]

事件用错了，因为你触发不了click，可以用3楼的方法试试

[zhuanshen712]

同意1楼。换成onchange

[cefriend]

<script    language="javascript">   
function    test()
{   
    document.all.showimg.src=document.all.file1.value;     
}   
</script>    


<img id="showimg">    
<input    type="file"    id="file1"    onchange="test()">

[a12321321321312321]

[Quote=引用 2 楼 zhoufoxcn 的回复:]
HTML code<td rowspan="4">
<img alt="照片" id="imgPerson" />
<input type="file" id="UpFile" runat="server" accept="text/*" name="UpFile" onchange="ShowImage();"/>
</td>




JScript codefunction ShowImage()
{
document.getElementById("imgPerson").src= document.all.UpFile.value;

}



换成o…
[/Quote]
同意

[qinhl99]

应该不行吧！
你就先上传上去，上传完了给提供预览功能和删除功能不就好了吗?

[lsd123]

我查了网上的一篇，但不知道什么意思：

这个问题折磨了我一个多小时，本来精神奕奕的，现在都有点疲倦了

原来我们这么写

===================================

<script    language="javascript">   
function    test()
{   
    document.all.showimg.src=document.all.file1.value;     
}   
</script>    

<img id="showimg">    
<input    type="file"    id="file1"    onchange="test()">

====================================

现在我们得把<img> 换成

<div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); "></div>

=====================================

<input type="file" ID="file_pic_path1" style="width: 500px;" onchange="FnImgChange()" />

javascript部分这样写

function FnImgChange()
{
    var objImgPath = document.getElementById("file_pic_path1");
    var objImg = document.getElementById("divShow");
    var img = objImgPath.value;

    objImg.style.visibility = "hidden";
    objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
    objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
   
    //过一小会获取div的宽高.
    setTimeout("setImg()",100);


}

function setImg()
{
    var o = document.getElementById("divShow");
   
    var width_img;
    var height_img;

    o.style.visibility = "visible";
    width_img=o.offsetWidth;
    height_img=o.offsetHeight;

    var width=420;   //预定义宽，图片的宽度了
    var height=200; //预定义高，如果宽小于长度，那么他会自适应按照宽度来计算比例，所以对于一般情况长>宽的照片时候，这个参数没啥意义


    var ratW;        //宽的缩小比例
    var ratH;        //高的缩小比例
    var rat;         //实际使用的缩小比例
    if(width_img<width && height_img<height)
    {
        //如果比预定义的宽高小，原图显示。
         o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
        return;

       
    }
    else
    {
        //如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
         o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

    }
    ratH = height/height_img;
    ratW = width/width_img;
    if(ratH<ratW)       //选择最小的作为实际的缩小比例
         rat=ratH;
    else
         rat=ratW;
       
    width_img = width_img * rat;
    height_img = height_img * rat;
    o.style.width = width_img;
    o.style.height = height_img;
}

[君鑫永结]

大家需要注意的是在Asp.net中通过src来显示物理绝对路径的图片这种方式是最简单的，但是只能在IE6及以下版本的才有效，IE7以及Firefox中的由于加强了对物理路径文件的限制，从而无法正常显示。所以开发时要注意这点，尽量在IE6或者遨游等浏览器中调试。