<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TempTest.aspx.cs" Inherits="WebApplication1.TempText" %>
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
function display(file) {
var img = document.getElementById("image");
img.src = file.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="File1" type="file" onchange="display(this)" />
<img id="image" alt="" src="" width="120" height="90" />
</div>
</form>
</body>
</html>
改变了src,但是image的现实图片还是空白。
楼上们都正解,本地文件访问安全问题。。。
这里提供个判断图片下载完毕并回调函数的方法:
//图片预加载并回调函数
function LoadImageAndCallback(url, callback)
{
var img = new Image();
img.src = url;
if(img.complete)
{
callback.call(img);
return;
}
img.onload = function()
{
callback.call(img);
}
}
如果是本地图片的话,IE7以上,Firefox,Chrome,Sarari,Opera都不会显示,因为有安全问题
你取到的value是本地文件,有安全限制
你尝试一下,在 File1 值改变事件,尝试一下,直接document.getElementById("File1").value,看看
楼主是想做上传时候的预览吧?如果是实际上并没有上传,本地文件有安全限制问题,就像是一楼说的那样,在低版本的ie(ie6)下面通过滤镜可以达到效果,但是其他浏览器都不兼容,所以还是上传以后再显示(实际上已经上传到服务器),这样的代码网上很多。