Advanced Search

Comprobar con AJAX si existe una imagen

/ Published in: HTML
Save to your folder(s)
visto en http://www.moddedup.com/imageexists/imageexists.html

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Using AJAX to check if a file exists</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  6. <script type="text/javascript">
  7. var req, image, warning, imagepath;
  8.  
  9. function d(o)
  10. {
  11. 	return document.getElementById(o);
  12. }
  13.  
  14. function loadimage(_imagepath)
  15. {
  16. 	image = d("image");
  17. 	image.style.display = "none";
  18.  
  19. 	imagepath = _imagepath;
  20.  
  21. 	warning = d("warning");
  22. 	warning.innerHTML = "Loading ...";
  23.  
  24. 	req = getreq();
  25. 	req.onreadystatechange = imagexists;
  26. 	req.open("get", imagepath, true);
  27. 	req.send(null);		
  28. }
  29.  
  30. function imagexists()
  31. {
  32. 	if(req.readyState == 4)
  33. 	{
  34. 		if(req.status == 200)
  35. 		{
  36. 			warning.innerHTML = "Image exists";
  37. 			image.style.display = "block";
  38. 			image.src = imagepath;
  39. 		}
  40. 		else
  41. 		{
  42. 			warning.innerHTML = "Image does not exist";
  43. 			image.style.display = "none";
  44. 		}
  45. 	}
  46. }
  47.  
  48. function getreq()
  49. {
  50. 	if(window.XMLHttpRequest)
  51. 		return new XMLHttpRequest();
  52. 	else if(window.ActiveXObject)
  53. 		return new ActiveXObject("Microsoft.XMLHTTP");
  54. }
  55.  
  56. </script>
  57. <style type="text/css">
  58. * { font-family: Verdana, Arial, sans-serif; }
  59. body { background-color: #FFF; }
  60. h1 { font-size: 14px; }
  61. #warning { margin: 10px; }
  62. #img { border: 1px solid #CCC; padding: 3px; margin: 10px; }
  63. </style>
  64. </head>
  65.  
  66. <body>
  67.  
  68. 	<h1>Check an image exists with AJAX</h1>
  69.  
  70. 	<input type="button" value="Load real image" onclick="loadimage('IMAG0272.jpg');" />
  71. 	<input type="button" value="Load fake image" onclick="loadimage('5hhhh_thumb.jpg');" />
  72.  
  73. 	<div id="warning"></div>
  74. 	<img id="image" src="blank.jpg" style="display: none;" alt="" />
  75.  
  76. </body>
  77. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.