...

View Full Version : some questions regarding the uploading of images



davidklonski
07-01-2004, 05:46 PM
Hello people

I am trying to write some code that will allow the user to upload an image and then see a preview of the image in the browser.

I was wondering whether it was possible to restrict the file types that the user will be able to choose from in the file selection dialog that is opened when the tag <input type="file"> is provided. I would like to restrict the selection to: gif, jpeg, jpg, png, bmp.

Once a selection is made, the path to the local file can be found in the tag's value attribute. I would like to display the selected image in a preview.

Since the width & the height of the newly uploaded image can be very large, I would like to restrict it to bounding dimensions. In order to be able to do so, I need to know the width and height of the newly uploaded image. Is it possible to obtain that information on the client side using Javascript, or do I need to interact with the server (I am using PHP)?

If all this is not possible, and must interact with the server, is it possible to display a progress bar that will show the progress of the image being uploaded? If so, I would appreciate if someone could point me to an article or some code snippet.

thanks in advance

Willy Duitt
07-01-2004, 07:47 PM
John answered your first question regarding file types here (http://www.codingforums.com/showthread.php?t=41105).
In regards to your second question regarding height and width you can use the image object to check both height and width and I think size also.

An example:



var image = new Image();
image.src = document.forms[0].file.value;

var width = image.width;
var height = image.height;

jamescover
07-02-2004, 01:11 AM
var myImg = new Image();
myImg.src = document.forms[0].file.value;

var width = myImg.width;
var height = myImg.height;
var size = myImg.fileSize;



-james

glenngv
07-02-2004, 02:11 PM
var myImg = new Image();
myImg.src = document.forms[0].file.value;

var width = myImg.width;
var height = myImg.height;
var size = myImg.fileSize;
-james
Image objects have no fileSize property. :rolleyes:

And you have to wait for the image to completely load before getting the width and height properties.


var image = new Image();
image.onload = function(){
alert(image.width + ' X ' + image.height);
}
image.src = 'theImage.gif';

You can incorporate that in this preview image script (http://www.codingforums.com/showthread.php?t=30865#post160562)

jamescover
07-02-2004, 06:00 PM
Image objects have no fileSize property.

They don't have one, or you can't determine it before download?


<script>
<!--
var myImg=new Image()
myImg.src="http://www.ekigroup.com/javascript/loadBar/loadani.gif";
function imgSize(){
if(myImg.complete){
alert(myImg.fileSize);
}
}
//-->
</script>

<body onload="javascript:imgSize();">

I didn't have any problem getting the height and width before download was complete.


Since the width & the height of the newly uploaded image can be very large, I would like to restrict it to bounding dimensions. In order to be able to do so, I need to know the width and height of the newly uploaded image.

...seems we're talking about uploading, not downloading....I think the best bet would be php.


-james

Willy Duitt
07-02-2004, 06:23 PM
I wasn't sure about getting the file size with javascript alone.
I have a script which does do that but it uses the File Scripting Object.....

And I would not think that you would need to wait and check the image for onload or complete since the image in question is already on the users hard drive and you are not depending upon upload/download speed.

.....Willy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum