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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thumbnail in Windows "Open file" dialogue

    I am coding an ASP page to upload image files to the server using an HTML form with <input type="file"... which is then passed to ASPUpload.

    Is there any way of making the Windows "Open file" window that comes up in response to type="file" show a thumbnail to show what any file clicked on looks like before it's selected?

    Cheers
    Charlie

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    you are most likely stuck with what you got there.
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,045
    Thanks
    0
    Thanked 251 Times in 247 Posts
    try this:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var isImage=false;
    function getFileInfo(oFile,e){
    //IE triggers both onclick and onchange while NS/Moz triggers onclick only
    if (oFile.value=='' || (document.all && e.type=='click')) return; 
    var file = new Image();
    file.onerror = function(){
      alert('Attached file is not an image.');
      isImage=false;
    }
    file.onload = function(){
      isImage=true;
    }
    file.src = 'file:///' + oFile.value.replace(/\\/g,'/');
    document.images['preview'].src=file.src;
    }
    
    function check(){
      if (!isImage) alert('Please attach an image file.');
      return isImage;
    }
    </script>
    </head>
    <body>
    <form method="post" enctype="multipart/form-data" action="PUPload.asp" onsubmit="return check()">
    <input type="file" name="file1" onclick="getFileInfo(this,event)" onchange="getFileInfo(this,event)">
    <input type="submit">
    <p>Preview:<br>
    <img name="preview" src="transparentPic.jpg">
    </p>
    </form>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Jul 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That's got it!

    Fantastic - thanks, Glenn - works a treat!
    Charlie

  • #5
    Senior Coder Morgoth's Avatar
    Join Date
    Jun 2002
    Location
    Ontario, Canada Remaining Brain Cells: 6
    Posts
    1,402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Wow, that's amazing...
    I might..
    Have to...
    use this..
    hehe.


  •  

    Posting Permissions

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