显示客户端的图片的有关问题

显示客户端的图片的问题类似这样的代码:imgid img1 inputtype file onchange img1.srcthis.va

显示客户端的图片的问题
类似这样的代码:

<img   id= "img1 ">
<input   type= "file "   onchange= "img1.src=this.value; ">

就是,用户选择本机(客户端)的一张图片,选择好后显示出来。

这样的代码放到一个静态html文件中,比如test.htm,打开,没有问题,图片可以显示;但是,如果把test.htm放到web服务器上,比如http://localhost/test.htm,这样访问,图片就不能显示,请问这是为什么?谢谢!


[解决办法]
<img alt= "上传前预览 " name=img>
<input type= "file " name= "file " onpropertychange= "img.src=value; ">
[解决办法]
可能会遇到权限问题在IE7
[解决办法]
估计是你的图片地址写错了,在onchange里alert下value,人工写进img,看看能不能显示~
不能显示看看图片地址是什么?服务器上是否存在这个图片~
[解决办法]
IE7和FF下是不能实现的。
[解决办法]
路径?
[解决办法]
function imgUpload_change(uploadControl)
{
var fileName = uploadControl.value.replace(/\\/g, "/ ").replace(/(.*\/)(.*)/, "$2 ");
var fileType = fileName.substring(fileName.lastIndexOf( '. ') + 1);
var fileType = fileType.toLowerCase();
var types = "bmp,jpg,gif ";
var arr = types.split( ", ");
var rightType = false;
for(var i=0;i <arr.length;i++)
{
if(fileType == arr[i]) { rightType = true;break;}
}
if(!rightType){ALERT( 'Choose a 『bmp,jpg,gif』 file please! ', ' ', 'Warning ');return;}
$( "imgUpload_photo ").src = uploadControl.value;
$( "ctl00_ContentPlaceHolder1_ctl07 ").value = 'true ';
$( "ctl00_ContentPlaceHolder1_ctl08 ").value = 'true ';
$( "ctl00_ContentPlaceHolder1_ctl09 ").innerHTML = "『 "+fileName+ "』 <span onclick= 'imgUpload_remove(); ' style= 'cursor:hand;font-family:webdings;color:red '> r </span> ";
uploadControl.style.display= "none ";
}
function imgUpload_remove()
{
$( "ctl00_ContentPlaceHolder1_ctl09 ").innerHTML= "@ Browse.. ";
$( "imgUpload_photo ").removeAttribute( "src ");
$( "ctl00_ContentPlaceHolder1_ctl06 ").style.display= "block ";
$( "ctl00_ContentPlaceHolder1_ctl08 ").value = 'false ';
}


//////////////


<table border= "0 ">
<tr>
<td> <div style= "width:60px; position: absolute;filter: alpha(opacity=0); ">
<input type= "file " name= "ctl00$ContentPlaceHolder1$ctl06 " id= "ctl00_ContentPlaceHolder1_ctl06 " onchange= "imgUpload_change(this); " size= "1 " style= "width:1px;cursor: hand; " /> <input type= "hidden " name= "ctl00$ContentPlaceHolder1$ctl07 " id= "ctl00_ContentPlaceHolder1_ctl07 " /> <input type= "hidden " name= "ctl00$ContentPlaceHolder1$ctl08 " id= "ctl00_ContentPlaceHolder1_ctl08 " />
</div> <span id= "ctl00_ContentPlaceHolder1_ctl09 " class= "Upload "> @ Browse.. </span> </td>
</tr> <tr>
<td> <img alt= ' ' id= "imgUpload_photo "/> </td>
</tr>
</table>




这是我自己写的服务器控件生成的代码,参考一下吧,说明一下,IE7的 <IMG> 标签没有图片预览功能
[解决办法]
<input type= "file " onchange= "document.getElementById( 'img1 ').src=this.value; ">
直接引用ID是不合法的javascript
[解决办法]
参考:
<form name= "form5 " id= "form5 " method= "post " action= "# ">
<input type= "file " name= "file5 " id= "file5 " onchange= "preview5() "/>
</form>
<script type= "text/javascript ">
function preview5()
{ var x = document.getElementById( "file5 ");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById( "img5 ");
if(y){
y.src = 'file://localhost/ ' + x.value;
}
else{
var img=document.createElement( 'img ');
img.setAttribute( 'src ', 'file://localhost/ '+x.value);
img.setAttribute( 'id ', 'img5 ');
document.getElementById( 'form5 ').appendChild(img);
}
}else{
alert( "您选择的似乎不是图像文件。 ");
}}
</script>