473,563 Members | 2,857 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 8654
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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javasc ript>
function ImageArray(file , img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage. src;
document.images[img].onload=functio n() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.imag es[img].width+'px'+
'\nimage height = '+document.imag es[img].height+'px')};
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<input name="myFile" type="file" onchange="Image Array(myFile,'i mg1')">
<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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javasc ript>
function ImageArray(file , img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage. src;
document.images[img].onload=functio n() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.imag es[img].width+'px'+
'\nimage height = '+document.imag es[img].height+'px')};
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<input name="myFile" type="file" onchange="Image Array(myFile,'i mg1')">
<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.n et>
wrote:
ASM wrote:
Roger Withnell wrote:
<script language=javasc ript>
<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=functio n() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.imag es[img].width+'px'+
'\nimage height = '+document.imag es[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=functio n() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.imag es[img].width+'px'+
'\nimage height = '+document.imag es[img].height+'px')};
}
// set the source for the image
document.images[img].src=thisImage. src;

--
Grant Wagner <sq*******@yaho o.com>
comp.lang.javas cript 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.checku ri -> 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.checku ri -> 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.n et>
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
17468
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
11747
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 table in MySQL with the path & filename to the image. I have successfully uploaded and performed an update query on the database, but the problem...
3
2425
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 window to be open (or displayed) inorder to save the image. Also, this utility is in the form of an executable, so I can't possibly alter it. I want...
2
6764
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 mouseOver instead of the popup I coded. The section of code below works perfectly in Firefox but not at all in IE (why am I not surprised?). The...
1
1548
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 images with an <img=..... I only get the direct path to the file-server. PS uploading the files works fine. But not dispalying them
0
1790
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 getting the picture resized and thumbnailed... I'm on a apache server running php 5 with 8MB php_memory. When uploading, the script works fine most...
1
2899
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 will open correctly, but other like Word, Excel and Powerpoint are corrupt. Here is code fragment to upload: // Get file in byte array int fileLen...
13
2338
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 reached yet (I have gone all the way to page 50 on Google's results!!). Here are my requirements: • I have a DataGrid. Everything will be done from...
4
8138
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 uploading code is: MYSQL_CONNECT("localhost","root",""); mysql_select_db("sample"); $data = addslashes(fread(fopen($form_data, "r"),...
0
7664
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7583
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7885
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8106
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7638
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5213
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3626
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2082
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
923
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.