单击图片,在js里获取图片的地址,并在文本框中显示

JavaScript020

单击图片,在js里获取图片的地址,并在文本框中显示,第1张

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 />控件中,你是不能获取到本机完整路径的。而且正常情况下也没有这么做的必要,如果你非要或者完整路径,你应该想想你们的需求是不是有问题。