用JS怎么样从客户获取相对路径并显示出来
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gbk"/><scriptsrc...
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script src="../js/jquery.js" type="text/javascript"></script>//注意要导入Jquery的类库
<script language="javascript">
$(function(){
var ei = $("#large");//获取Div
ei.hide();
$("#img1, img").mousemove(function(e){//img1是 显示 上传图片的缩略图
//鼠标经过的时候 给div加上 图片
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();//否则 就隐藏
})
$("#f1").change(function(){ //上传 控件 上传的 预览
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="200" height="200" >
<div id="large"></div>
</body>
</html>
在IE6或以下这个没问题，可IE6以上。 $("#img1").attr("src","file:///"+$("#f1").val()); 起不了效果。我们不能用JS获取客户的相对路径，并显示出来了吗？有什么方法改一下这句话，让它也能在IE6以上的运行。运行这段程序要导入Jquery的类库 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script src="../js/jquery.js" type="text/javascript"></script>//注意要导入Jquery的类库
<script language="javascript">
$(function(){
var ei = $("#large");//获取Div
ei.hide();
$("#img1, img").mousemove(function(e){//img1是 显示 上传图片的缩略图
//鼠标经过的时候 给div加上 图片
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();//否则 就隐藏
})
$("#f1").change(function(){ //上传 控件 上传的 预览
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="200" height="200" >
<div id="large"></div>
</body>
</html>
在IE6或以下这个没问题，可IE6以上。 $("#img1").attr("src","file:///"+$("#f1").val()); 起不了效果。我们不能用JS获取客户的相对路径，并显示出来了吗？有什么方法改一下这句话，让它也能在IE6以上的运行。运行这段程序要导入Jquery的类库 展开
展开全部
浏览器安全性已经大大提高，要实现图片上传预览不是那么简单了
不过有很多变通或先进的方法来实现
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法
具体可以参考这个图片上传预览效果
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?3=u&id=11586
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
//下面是IE8的，IE6这么古老的浏览器没装
//FF下 file控件通过js只能得到文件名不能得到文件路径
<input type="file" id="aaa">
<div id="bbb"></div>
<script>
document.getElementById("aaa").onchange=function(){
var url=this.value;
var img=new Image();
img.src=url; // "file:///"+url 也可
document.getElementById("bbb").appendChild(img);
}
</script>
//FF下 file控件通过js只能得到文件名不能得到文件路径
<input type="file" id="aaa">
<div id="bbb"></div>
<script>
document.getElementById("aaa").onchange=function(){
var url=this.value;
var img=new Image();
img.src=url; // "file:///"+url 也可
document.getElementById("bbb").appendChild(img);
}
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
具体点
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
