www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image Preview with input file

  1. #1
    Join Date
    Jan 2010
    Posts
    41

    Image Preview with input file

    hi,

    I am getting problem to preview image when user select file before submit the form. I tried to search on internet to sort out this porblem but no succeeded.

    Can any body help me. My code is as below:
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="JavaScript" type="text/JavaScript">
    function previewImage() {
       var image=document.form1.image;
       image.src = document.form1.file.value;
      
      }
    
    
    </script>
    
    
    
    </head>
    
    <body>
       <FORM ACTION="" METHOD="post" ENCTYPE="multipart/form-data" NAME="form1">
    <INPUT TYPE="file" NAME="file" onchange="previewImage()">
    
    <img src="Sample Pictures/Desert Landscape.jpg"  name="image" width="100" height="100" />
    </FORM>
    
    
    </body>
    </html>
    Thanks

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Not sure if this will work, I have not tested it.

    http://teck.in/javascript-to-preview-local-image.html

    ^_^

  3. #3
    Join Date
    Jan 2011
    Location
    San Francisco
    Posts
    19
    I've had this same problem. The "value" of the file input element is just the file name; most browsers (all modern ones) remove the path from the file name internally, stopping javascript from directly accessing the file. The file is instead stored under document.form1.file.files[0], but you can't really work with this directly very easily either. There are several ways to do it, like the new File API (which has a FileReader class that can read the file), but I have yet to figure out a simple, browser independent way to make this work. The file API is only well implemented in Chrome and FF, while Opera and Safari have non-standard versions that are not well documented as far as I can tell. IE, meanwhile, is an absolute black box to me.

    Also, you can never, ever access a file on your own computer from a script running off your own computer, at least not in FF or chrome. You have to load the script to a webpage and run it from there. Both of these issues are meant to fix some security problem, but I can't imagine how my own computer accessing its own files is a security risk.

    Sorry I can't be more help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles