<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel Hiero</title>
<script type="text/javascript">
<!--
var Lang;
var imgLoaded = false, imgValidated = false;
var extensions
= new Array('gif','jpg','png', 'jpeg'); var maxWidth = 800;
var maxHeight = 600;
var formVolgNr = 0; /* 0 is het eerste form op het document */
window.onload = function() {
Lang = new Nederlands();
if(document.forms[formVolgNr]) {
document.forms[formVolgNr].onsubmit = function() { return Validated(); }
var a = document.forms[formVolgNr].elements;
for(var i=0;i<a.length;i++) {
if(a[i].type == "file" && /^image.*?$/i.test(a[i].name)) a[i].onclick = function() { UploadImage(this.value); }
}
}
}
function UploadImage(val) {
imgLoaded, imgValidated = false;
if(CheckExtention(val) === false) { imgValidated = false; }
var img = new Image();
img.onload = function() { parseDimensions(img); };
img.src = "file:///"+val;
}
function parseDimensions(img) {
if(img.width < 0 || img.width > maxWidth) { imgValidated = false; alert(Lang.tooWidth); }
else if(img.height < 0 || img.height > maxHeight) { imgValidated = false; alert(Lang.tooHigh); }
else { imgValidated = true; }
}
function Validated() {
if(imgLoaded === false) { alert(Lang.notLoaded); return false; }
if(imgValidated === false) { alert(Lang.notValidated); return false; }
return true;
}
function CheckExtention(val) {
var exts = "", matchString = "";
for(var i=0;i<extensions.length;i++) {
exts
= (i
== (extensions
.length
-1)) ? exts
.substr(0,exts
.length
-2)+' '+Lang
.or
+' '+extensions
[i
] : exts
+extensions
[i
]+', '; matchString
= (i
== (extensions
.length
-1)) ? matchString
.substr(0,matchString
.length
-1)+"|"+extensions
[i
] : matchString
+extensions
[i
]+'|'; }
var RegExp
= eval("/^.+?\.("+matchString
+")$/i"); if(RegExp.test(val) === true) return true;
alert(Lang.falseExt(exts));
return false;
}
function Nederlands() {
this.lang = 'nl';
this.or = 'of';
this.notLoaded = 'Bestand nog niet geladen.';
this.notValidated = 'Het formulier is niet gevalideerd, controleer uw bestanden.';
this.tooWidth = 'Afbeelding is te breed.';
this.tooHigh = 'Afbeelding is te hoog.';
this.falseExt = function(exts) { return 'Het bestand dient op '+exts+' te eindigen.'; }
}
function English() {
this.lang = 'en';
this.or = 'or';
this.notLoaded = 'File is not loaded yet.';
this.notValidated = 'The form is not validated, please recheck your files.';
this.tooWidth = 'Image is too width';
this.tooHigh = 'Image is too high.';
this.falseExt = function(exts) { return 'the files has to end with '+exts+'.'; }
}
/* voorbeeld Language changer
Simpele switch tussen nederlands en engels
*/
function ChangeLang() {
Lang = (Lang.lang == 'nl') ? new English() : new Nederlands();
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form action='index.html' method='post' enctype="multipart/form-data">
<div>
De input van type
file dienen een naam te bevatten
die begint met image
(case
-insensitive
). alle andere files worden genegeerd
.<br
/> Verder dient er boven in het javascript een MaxWidth, MaxHeight en een form volg nummer ingevuld te worden.<br />
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 />
<br />
Zoals je kunt zien is er ook een language object zodat de berichten makkelijk aangepast kunnen worden of tussen talen geswitcht kan worden.
Onder aan het document een voorbeeld.
<br />
<input type='file' name='imageB' /><br />
<input type='file' name='ImaGeA' /><br />
<input type='file' name='Document' /><br />
<input type='submit' value=' Opslaan ' />
</div>
<div>
<a href='javascript:ChangeLang()'>Verander taal</a>
</div>
</form>
</body>
</html>