Entry
When the user selects an image file for upload, how can I upload the file dimensions too?
Apr 1st, 2001 04:31
Martin Honnen,
IE4+ and NN6 can do that, NN4 has a security restriction preventing you
from loading a local image.
Here is the code that works with NN6 and IE4+, and for NN4 and Opera
simply uploads the file but doesn't pass the image dimensions.
<html>
<head>
<script>
function loadImage (filePath, inputWidth, inputHeight) {
var img = new Image();
img.onload = function (evt) {
inputWidth.value = this.width;
inputHeight.value = this.height;
}
img.src = 'file:///' + filePath;
}
function loadImageAndSubmit (filePath, inputWidth, inputHeight, form) {
var img = new Image();
img.onload = function (evt) {
inputWidth.value = this.width;
inputHeight.value = this.height;
form.submit();
}
if (!document.layers && !window.opera)
img.src = 'file:///' + filePath;
else
form.submit();
}
</script>
</head>
<body>
<form name="formName"
action="whatever.cgi"
method="post"
enctype="multipart/form-data"
>
<input type="hidden" name="imageWidth" />
<input type="hidden" name="imageHeight" />
<input type="file" name="fileName"
onchange="loadImage(this.value, this.form.imageWidth,
this.form.imageHeight)"
/>
<input type="button" value="submit"
onclick="loadImageAndSubmit(this.form.fileName.value,
this.form.imageWidth,
this.form.imageHeight,
this.form);"
/>
</form>
</html>
