Image Preview with input file

**rashid100** · 01-18-2011 03:59 AM

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

**WolfShade** · 01-18-2011 08:51 AM

Not sure if this will work, I have not tested it.

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

^_^

**Sockwave** · 01-18-2011 02:11 PM

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: Image Preview with input file

Thread Tools

Display

Image Preview with input file

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions