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
    Regular Coder
    Join Date
    Jul 2002
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto Preview of Image after selected.

    I am creating an image gallery and I have two input fields, one for inputing a URL and another file input which allows you to browse for files on your computer. How do i make it so that if a person types a url in the first box that the Image Placeholder i have in my form will automatically change and display a preview of the image at that URL

    OR

    If someone browses their computer for an image and selects ok in the browse box that that image will be displayed in the preview place holder.

    I would also like for only one box to be able to be filled out at a time to prevent errors from accuring.

    So what i have is:

    Enter URL: [ Text Box ]
    or [Text Box] {Browse}

    I would like for each to automatically preview somehow but i understand that the URL text box may require a added Preview button. Can someone help me with this. I don't know much JS
    If your interested in Home Automation visit: CocoonTech.com - Home Automation, Theaters, and Security

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After doing a little searching i came up with this much.

    <Input type="file" name="fieldName" onchange="document.Images["preview"].src=this.value">
    <Img name="preview" src="default.jpg">

    I think i am going to get rid of the URL box and only use the file upload method. Now how would i use JavaScript to check the file extention and reject any files which do not contain JPG Gif BMP or PNG?
    If your interested in Home Automation visit: CocoonTech.com - Home Automation, Theaters, and Security

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a regular expression to check the file extensions but this is not going to help you with your preview since you will need to upload those images to your server prior to using them on your page. You can not preview the files on someones PC unless you use Active X and they explicitly give you permissions to do so....

    Code:
    <script type="text/javascript">
     <!--//
      function chkExt(file){
       var goodExt = /[^/].(?:jpg|gif|bmp|png)/i;
        if(file.value.match(goodExt)){ alert('Good Extension') };
        else{ alert('Bad Extension') };
      }
     //-->
    </script>
    </head>
    
    <body>
    <form>
    <input type="file" onchange="chkExt(this)">
    </form>
    .....Willy

  • #4
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't forget to allow .jpeg

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So this explains why my code does not work... but other people say it does work for them???

    Code:
     					
      <input name="file" type="file" size="32" onChange="document.images.preview.src =(this.value)" />
    
      <img name="preview" src="images/default.gif" width="75" height="90" alt="Members Photo"></div>
    If your interested in Home Automation visit: CocoonTech.com - Home Automation, Theaters, and Security

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,038
    Thanks
    0
    Thanked 250 Times in 246 Posts
    This works both in Moz and IE. IE triggers onchange event when a file is already chosen but Moz triggers onclick event, so you have to add both handler. Actually, IE also triggers onclick but it fires when you click Browse button and you have not chosen a file.

    You also need to put the file:// protocol and change \ to /.

    Code:
    <input type="file"
        onclick="if (!doument.all) document.images['preview'].src='file:///'+this.value.replace(/\\/g,'/')"
        onchange="document.images['preview'].src='file:///'+this.value.replace(/\\/g,'/')">


  •  

    Posting Permissions

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