473,379 Members | 1,270 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,379 software developers and data experts.

Display image file in browser before uploading to server

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
7 8620
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: ok | last post by:
Hello, Q: How do I get image width and height before uploading an image? This because, I want to restrict people uploading huge files. Thanks in advance
3
by: dave | last post by:
Hello there, I am at my wit's end ! I have used the following script succesfully to upload an image to my web space. But what I really want to be able to do is to update an existing record in a...
3
by: Hemanth | last post by:
Hello there, I've a utility that runs on a linux machine. Basically, it opens a window, draws a figure and captures the image (screen) and stores it as a jpeg file. The utility requires a...
2
by: Tyrone Slothrop | last post by:
I am coding a site which involves uploading images. All of the PHP and display is OK but the client wants to be able to display the image thumbnail on the upload page and show the full image on...
1
by: staleb | last post by:
Hi My problem is like this: I have a file-server and a web-server. How do I display images that r stored on the file-server. The users only have dircet access to web-server. When I display the...
0
by: doffer | last post by:
I want to make a portfoliosystem where user can register and get their own portfolio... I've started the developer work, but I'm stuck on the image upload part... I'm experiencing some problems...
1
by: Charlie | last post by:
Hi: I'm uploading documents into a SQL Server Image field and using Response.BinaryWrite() to download or view them in the browser. Some doc types like Adobe Illustrator and Photoshop files...
13
by: Neo Geshel | last post by:
I have examined about 80+ different upload scripts on the 'net, both in VB and C#, and none seem to do what I need them to do. Perhaps someone here can point me somewhere that Google hasn't...
4
by: foss | last post by:
HI all, I am able to upload the image as blob to mysql. but while displaying the image i cant display it properly . The code used for uploading image to mysql inserts data into mysql table.The...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.