1、为图片绑定点击事件
2、在点击事件中使用jQuery获得图片的src属性
3、调用文本框的val()方法,将取到的图片路径显示在文本框中
<html><head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//为图片绑定点击事件
$("#tu").click(function(){
//获得图片的src属性
var url=$(this).prop("src")
//将图片路径赋值到文本框中
$("#txtUrl").val(url)
})
})
</script>
</head>
<body>
<img id="tu" src="images/friend.jpg" width="800" height="600" /><br/>
<input type="text" id="txtUrl" />
</body>
</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/htmlcharset=gb2312" />
<title>get file input full path</title>
<script language='javascript'>
function getFullPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select()
return document.selection.createRange().text
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
return obj.files.item(0).getAsDataURL()
}
return obj.value
}
return obj.value
}
}
</script>
</head>
<body>
<input type="file" onchange="document.getElementById('img').src=getFullPath(this)" />
<img id="img" />
</body>
</html>
firefox7+请使用return window.URL.createObjectURL(obj.files.item(0))来获取地址
如果你指的是C:\Users\Public\Pictures\Sample Pictures\沙漠.jpg类似这种本地路径,是不可能的。因为文件路径也属于用户的敏感信息,js这种web语言对本机文件的处理非常有限,目的也是为了避免安全以及隐私问题。<input type="file />控件中,你是不能获取到本机完整路径的。而且正常情况下也没有这么做的必要,如果你非要或者完整路径,你应该想想你们的需求是不是有问题。