login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Formulieren > Image validatie

Image validatie

Auteur: BramBo - 04 juli 2007 - 22:00 - Gekeurd door: marten - Hits: 3723 - Aantal punten: (0 stemmen)




een compleet document dat illustreert hoe je een image op hoogte,breedte en extensie valideert. alle documentatie die nodig is staat in de HTML.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>Titel Hiero</title>
  5.  <script type="text/javascript"> 
  6.  <!--
  7.  var Lang;
  8.  var imgLoaded = false, imgValidated = false;
  9.  var extensions			= new Array('gif','jpg','png', 'jpeg');
  10.  var maxWidth 			= 800;
  11.  var maxHeight 			= 600;
  12.  var formVolgNr			= 0; /* 0 is het eerste form op het document */
  13.  
  14.  window.onload = function() { 
  15. 	Lang = new Nederlands();
  16.  
  17. 	if(document.forms[formVolgNr])	{
  18. 		document.forms[formVolgNr].onsubmit = function() { return Validated(); }
  19.  
  20. 		var a = document.forms[formVolgNr].elements;
  21. 		for(var i=0;i<a.length;i++) {
  22. 			if(a[i].type == "file" && /^image.*?$/i.test(a[i].name)) a[i].onclick = function() { UploadImage(this.value); }
  23. 		 }
  24. 	}
  25.  }
  26.  
  27.  function UploadImage(val) {
  28. 	imgLoaded, imgValidated = false;
  29. 	if(CheckExtention(val) === false) { imgValidated = false; }
  30.  
  31. 	var img 		= new Image();
  32. 	img.onload 		= function() { parseDimensions(img); };
  33. 	img.src 		= "file:///"+val;
  34.  }
  35.  
  36.  function parseDimensions(img) {
  37. 	if(img.width < 0 || img.width > maxWidth) 		{ imgValidated = false; alert(Lang.tooWidth); }
  38. 	else if(img.height < 0 || img.height > maxHeight) 	{ imgValidated = false; alert(Lang.tooHigh); } 
  39. 	else							{ imgValidated = true;  }
  40.  }
  41.  
  42.  function Validated() {
  43. 	if(imgLoaded === false) 	{ alert(Lang.notLoaded);    return false; }
  44. 	if(imgValidated === false) 	{ alert(Lang.notValidated); return false; }
  45. 	return true;
  46.  }
  47.  
  48.  function CheckExtention(val) {
  49. 	var exts = "", matchString = "";
  50.  
  51. 	for(var i=0;i<extensions.length;i++) {
  52. 		 exts 	     = (i == (extensions.length-1)) ? exts.substr(0,exts.length-2)+' '+Lang.or+' '+extensions[i]   : exts+extensions[i]+', ';
  53. 		 matchString = (i == (extensions.length-1)) ? matchString.substr(0,matchString.length-1)+"|"+extensions[i] : matchString+extensions[i]+'|';	
  54. 	 }
  55.  
  56. 	var RegExp = eval("/^.+?\.("+matchString+")$/i");
  57. 	if(RegExp.test(val) === true) return true; 
  58.  
  59. 	alert(Lang.falseExt(exts));
  60. 	return false;
  61.   }
  62.  
  63.  function Nederlands() { 
  64. 	this.lang		= 'nl';
  65. 	this.or 		= 'of';
  66. 	this.notLoaded 		= 'Bestand nog niet geladen.';
  67. 	this.notValidated 	= 'Het formulier is niet gevalideerd, controleer uw bestanden.';
  68. 	this.tooWidth 		= 'Afbeelding is te breed.';
  69. 	this.tooHigh 		= 'Afbeelding is te hoog.';
  70. 	this.falseExt		= function(exts) { return 'Het bestand dient op '+exts+' te eindigen.'; }
  71.   }
  72.  
  73.  function English() { 
  74. 	this.lang		= 'en';
  75. 	this.or 		= 'or';
  76. 	this.notLoaded 		= 'File is not loaded yet.';
  77. 	this.notValidated 	= 'The form is not validated, please recheck your files.';
  78. 	this.tooWidth 		= 'Image is too width';
  79. 	this.tooHigh 		= 'Image is too high.';
  80. 	this.falseExt		= function(exts) { return 'the files has to end with '+exts+'.'; }
  81.   }
  82.  
  83.  
  84.  /* voorbeeld Language changer
  85.     Simpele switch tussen nederlands en engels
  86.  */
  87.  function ChangeLang() {
  88. 	Lang = (Lang.lang == 'nl') ? new English() : new Nederlands(); 
  89.   }
  90.  
  91.  //-->
  92.  </script>
  93.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  94. </head>
  95. <body>
  96.  <form action='index.html' method='post' enctype="multipart/form-data">
  97.   <div>
  98. 	De input van type file dienen een naam te bevatten die begint met image(case-insensitive). alle andere files worden genegeerd.<br />
  99. 	Verder dient er boven in het javascript een MaxWidth, MaxHeight en een form volg nummer ingevuld te worden.<br />
  100. 	Het form volg nummer is er zodat het juiste form wordt gebruikt, zodat wanneer er meerdere forms zijn deze niet in de weg komen.<br />
  101. 	<br />
  102. 	Zoals je kunt zien is er ook een language object zodat de berichten makkelijk aangepast kunnen worden of tussen talen geswitcht kan worden. 
  103. 	Onder aan het document een voorbeeld.
  104. 	<br />
  105. 	<input type='file' name='imageB' /><br />
  106. 	<input type='file' name='ImaGeA' /><br />
  107. 	<input type='file' name='Document' /><br />
  108. 	<input type='submit' value='    Opslaan    ' />
  109.   </div>
  110.   <div>
  111.  	<a href='javascript:ChangeLang()'>Verander taal</a>
  112.   </div>
  113.  </form>
  114. </body>
  115. </html>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Geen reacties (0)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.031s