By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,743 Members | 1,122 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,743 IT Pros & Developers. It's quick & easy.

Display image file in browser before uploading to server

P: n/a
I would like to check that an image file, selected by a user using
fileUpload, is within certain parameters (width, height, filesize) and to
display the image file so that the user can see the correct image has been
chosen, before uploading it to the server.

http://www.your-community.co.uk/TestImageArray.asp is an extract of the
basic functions which work in IE but not in NN (the alerts are just tests to
see what is going on).

It appears that NN, although it saves the src property, it does not save
width and height (and doesn't have filesize). And, although it adds the
image to the images array, it does not display it.

Is there a way I can fix this, either by tweaking my code or by another
method?

Any help much appreciated.

Aug 13 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
ASM
Roger Withnell wrote:
http://www.your-community.co.uk/TestImageArray.asp is an extract of the

It appears that NN, although it saves the src property, it does not save
width and height (and doesn't have filesize). And, although it adds the
image to the images array, it does not display it.
Is there a way I can fix this, either by tweaking my code or by another
method?


that bellow works with my FF (not found for file size)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
function ImageArray(file, img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage.src;
document.images[img].onload=function() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.images[img].width+'px'+
'\nimage height = '+document.images[img].height+'px')};
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<input name="myFile" type="file" onchange="ImageArray(myFile,'img1')">
<img id="img1" name="img1" src="">

</form>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Aug 14 '05 #2

P: n/a
ASM wrote:
Roger Withnell wrote:
http://www.your-community.co.uk/TestImageArray.asp is an extract of the
It appears that NN, although it saves the src property, it does not
save width and height (and doesn't have filesize). And, although it
adds the image to the images array, it does not display it.
Is there a way I can fix this, either by tweaking my code or by
another method?

that bellow works with my FF (not found for file size)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
function ImageArray(file, img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage.src;
document.images[img].onload=function() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.images[img].width+'px'+
'\nimage height = '+document.images[img].height+'px')};
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<input name="myFile" type="file" onchange="ImageArray(myFile,'img1')">
<img id="img1" name="img1" src="">

</form>
</body>
</html>


I try this script, and it works in IE but not in Firefox. Is there any
solution that works in Firefox, thx.
Aug 23 '05 #3

P: n/a
ASM
John Smith wrote:
ASM wrote:
Roger Withnell wrote:
http://www.your-community.co.uk/TestImageArray.asp is an extract of the
It appears that NN, although it saves the src property, it does not
save width and height (and doesn't have filesize). And, although it
adds the image to the images array, it does not display it.
Is there a way I can fix this, either by tweaking my code or by
another method?
that bellow works with my FF (not found for file size)


[snip]
I try this script, and it works in IE but not in Firefox. Is there any
solution that works in Firefox, thx.


With me it only works at home (not in line)
and only with FF, not with IE
curious ... ? !

--
Stephane Moriaux et son [moins] vieux Mac
Aug 23 '05 #4

P: n/a
On Tue, 23 Aug 2005 19:06:41 +0200, John Smith <us**@example.net>
wrote:
ASM wrote:
Roger Withnell wrote:
<script language=javascript>
<script type="text/javascript">
function ImageArray(file, img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage.src;
document.images[img].onload=function() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.images[img].width+'px'+
'\nimage height = '+document.images[img].height+'px')};
}


You should set the -onload- event for each image prior to setting it's
-src-. If the images are cached, it's possible setting the -src- will
fire the -onload- event before you have a chance to set it.

// set the onload event for the image
document.images[img].onload=function() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.images[img].width+'px'+
'\nimage height = '+document.images[img].height+'px')};
}
// set the source for the image
document.images[img].src=thisImage.src;

--
Grant Wagner <sq*******@yahoo.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Aug 24 '05 #5

P: n/a
Roger Withnell ha escrito:
I would like to check that an image file, selected by a user using
fileUpload, is within certain parameters (width, height, filesize) and to
display the image file so that the user can see the correct image has been
chosen, before uploading it to the server.


1) URI of type C:/... or /usr/... isn't valid, do this:

function rewriteLocalURL(url) {
var uri = url;

/* identify Windows-Scheme */
if ((uri.charAt(1) == ':') &&
(uri.charAt(2) == '\\')) {
uri = 'file:///' + uri.replace(/\\+/, '/');
}
/* identify Linux-Scheme */
else if (uri.charAt(0) == '/') {
uri = 'file:///' + uri;
}

return uri;
}

2) The URIs file:///usr and http://www.your-community.co.uk have
different security classifications in NS/FF/SM/MOZ, set

security.checkuri -> false

You are not allowed to change this in JavaScript, you can't
trigger a permition-requester dynamically without putting
the site into a signed jar (thanks to the security-core of
NS/FF/SM/MOZ). You can set it manually though.

So it's not possible in general, it depends on your security-settings.

Ciao
Niels

Aug 24 '05 #6

P: n/a
ASM
ni*************@seies.de wrote:
Roger Withnell ha escrito:
I would like to check that an image file, selected by a user using
fileUpload, is within certain parameters (width, height, filesize) and to
display the image file so that the user can see the correct image has been
chosen, before uploading it to the server.

1) URI of type C:/... or /usr/... isn't valid, do this:

function rewriteLocalURL(url) {
var uri = url;


Why these browsers and systems don't use same uri ? :-(
/* identify Windows-Scheme */
if ((uri.charAt(1) == ':') &&
(uri.charAt(2) == '\\')) {
uri = 'file:///' + uri.replace(/\\+/, '/');
}
/* identify Linux-Scheme */
are you sure for that ?
because my IE file-upload sends also uri beginning by '/'
and final uri (on my IE Mac and FF) needs : 'file://'

while linux uri would be : 'file:////'
( 4 slashes ? really ? )
else if (uri.charAt(0) == '/') {
uri = 'file:///' + uri;
}

return uri;
}
My last test :
http://perso.wanadoo.fr/stephane.mor...in_image_2.htm
(works at my home : IE, FF, Safari, Opera, iCab)
Except with IE, all others don't work thru the Net
because they search image on the site and not on the DD
(click added buttons to see)
2) The URIs file:///usr and http://www.your-community.co.uk have
different security classifications in NS/FF/SM/MOZ, set

security.checkuri -> false
Hu ?
what to do with that ?
You are not allowed to change this in JavaScript, you can't
trigger a permition-requester dynamically without putting
the site into a signed jar (thanks to the security-core of
NS/FF/SM/MOZ). You can set it manually though.

So it's not possible in general, it depends on your security-settings.

Ciao
Niels

--
Stephane Moriaux et son [moins] vieux Mac
Aug 25 '05 #7

P: n/a
ASM
Grant Wagner wrote:
On Tue, 23 Aug 2005 19:06:41 +0200, John Smith <us**@example.net>
wrote:

ASM wrote:
Roger Withnell wrote:
[snip]
function ImageArray(file, img) {

[nsip]
You should set the -onload- event for each image prior to setting it's
-src-. If the images are cached, it's possible setting the -src- will
fire the -onload- event before you have a chance to set it.


OK, now that works even with IE
Tested with IE, FF, Safari, Opera, iCab (Mac)
-> work fine at home

IE alone works on Net
http://perso.wanadoo.fr/stephane.mor...in_image_2.htm
others try to find image in the site and not on DD :-(
--
Stephane Moriaux et son [moins] vieux Mac
Aug 25 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.