how to select an individual image in <div> tag and and add onclick function to image
Question
`
<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 eg 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 DC"); 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>
`i am trying the same for so many days but i can't select an individual image in and my aim is to select an individual image from div tag an give a function that when onclick it should store in mysql database.so please help me to do this its my project
<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>
2 answers
solution1
0 2016-03-26 16:47:56
This might help:
// 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.
})
solution2
0 ACCPTED 2016-03-26 17:29:07
onClick is not html element. It is an ATTRIBUTE of html element. So this is how your html code should look like:
<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>
And of course your JS function:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
onclick add image to div
How to make onclick select the div square the image is on not the image itself
How to change image in a div with select tag?
How can i add an onclick even in an image tag
How to call onClick function from anchor tag by click on image?
Using image tag to pass a function with 'onclick'
How to change background image of div with select tag, using javascript?
div onclick function to change body background image
How to add an image and increment the images on after each onclick function in jquery
I want to disabled onClick event for image inside div onClick function?
Related Tags