如何在<div>标签中选择单个图像,并将onclick功能添加到图像

时间:2016-03-26 16:24:32

标签: javascript html

`

&#13;
&#13;
<html>
<head>
<body>
<div>

<img src="p1.jpg" alt="a" align="center"  width="200" height="300" onClick="InsertPictureToMySql(event);" >

<img src="p2.jpg" alt="b" align="center"  width="200" height="300" onClick="InsertPictureToMySql(event);" > 

<img src="p3.jpg" alt="c" align="center"  width="200" height="300" onClick="InsertPictureToMySql(event);" >
</div>
<br>

<script>
function InsertPictureToMysql(evt) {
        //event.target is where you get dom element of your picture
        var target = event.target;
        //you can then get e.g. event.target.src to get path to the picture...
        //here you can do your saving/uploading logic...
    
<%@ page import="java.sql.*"%>

<%@ page import="java.io.*"%>

<%

Connection con=null;

ResultSet rs=null;

PreparedStatement psmt=null;

FileInputStream fis;

String url="jdbc:mysql://192.168.10.13:3306/test";

try{

Class.forName("com.mysql.jdbc.Driver").newInstance();

con=DriverManager.getConnection(url,"root","root");

File image = window.getSelection(Image.valueOf(Image));

psmt=con.prepareStatement("insert into inimage(name,city,image)"+"values(?,?,?)");

psmt.setString(1,"Barack Obama");

psmt.setString(2,"Wasington D.C.");

fis=new FileInputStream(image);

psmt.setBinaryStream(3, (InputStream)fis, (int)(image.length()));

int s = psmt.executeUpdate();

if(s>0) {

%>

<b><font color="Blue">

<% out.println("Image Uploaded successfully !"); %>

</font></b>

<%

}

else {

out.println("unsucessfull to upload image.");

}

con.close();

psmt.close();

}catch(Exception ex){

out.println("Error in connection : "+ex);

}

%>
}

</body>
</head>
</html>
&#13;
&#13;
&#13;

`我正在尝试这么多天,但我无法选择单个图像,我的目的是从div标签中选择一个单独的图像,并提供一个函数,当它在onclick它应该存储在mysql数据库中.so请帮助我这样做我的项目

&#13;
&#13;
<div align="center">
 <onClick="return.InsertPictureToMySql();" ><img src="images/p1.jpg" alt="a" align="center"  width="200" height="300">
 <onClick="return.InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center"  width="200" height="300">
 
</div><br>

<div align="center">
 <onClick="return java.InsertPictureToMySql();"><img src="images/p1.jpg" alt="a"  align="center" width="200" height="300">
 <a target="_blank" href="images/p4.jpg"><img src="images/p2.jpg" alt="b" align="center"  width="200" height="300">
 <br>
</div>

<div align="center">
 <onClick="return InsertPictureToMySql();"><img src="images/p1.jpg" alt="a" align="center" width="200" height="300">
 <onClick="return InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300">
 </div><br>
</br>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

这可能会有所帮助:

// Here, I take the last image, but you might want to take any. Then, bind the 
// click event to it 
$('img').last()
.bind('click',function() {
 alert('clicked');
 // run the function to store it in the db.
})

答案 1 :(得分:0)

onClick不是html元素。它是html元素的属性。 这就是你的HTML代码应该是这样的:

<div align="center">
    <img src="images/p1.jpg" alt="a" align="center"  width="200" height="300" onclick="insertPictureToMysql(event);">
    <img src="images/p2.jpg" alt="b" align="center"  width="200" height="300" onclick="insertPictureToMysql(event);">
</div>

当然你的JS功能:

<script>
    function insertPictureToMysql(evt) {
        //event.target is where you get dom element of your picture
        var target = event.target;
        //you can then get e.g. event.target.src to get path to the picture...
        //here you can do your saving/uploading logic...
    }
</script>