Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    some questions regarding the uploading of images

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    John answered your first question regarding file types here.
    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:

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

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    var myImg = new Image();
    myImg.src = document.forms[0].file.value;

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



    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by jamescover
    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.

    And you have to wait for the image to completely load before getting the width and height properties.
    Code:
    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

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by jamescover; 07-02-2004 at 05:08 PM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •