0

The following code doesn't work in Firefox and Chrome but works in IE. Can anyone tell me why it doesn't work in browser except IE with solution. Thanks in advance.

<html>
<head>
<script>
function hello()
{
    var a=document.getElementById("upload").value;
    alert(a);
    document.getElementById("previewIMG").src=a;
    document.getElementById("previewIMG").style.display="block";
}

</script>

</head>
<body>
<form name="img"  enctype="multipart/form-data">
<input type="file" name="upload" id="upload" />
<input type="button" name="submit" value="Upload Me Now" onClick="javascript:hello();">
<img id="previewIMG" src="" style="display:none;" />
</form>
</body>
</html>
DVK
  • 119,765
  • 29
  • 201
  • 317
shahith
  • 1
  • 1
  • 4
  • Not allowed to load local resource – mgraph Feb 28 '12 at 11:16
  • 1
    Welcome to Stack Overflow! "Doesn't work" is never a good error description. Please in the future, do some debugging (*what* exactly doesn't work? What does `a` contain on IE, and what does it contain in FF? etc.) Thanks! – Pekka Feb 28 '12 at 11:16

2 Answers2

4

There are two problems with this:

  1. Modern browsers don't expose the full path to files selected in file uploads any more. They show something like this:

    C:\Fakepath\Filename.txt

    unfortunately, that destroys the possibility of having a local image preview.

  2. Modern browsers don't allow embedding local image resources, also for security reasons, so even if 1.) didn't exist, it wouldn't work because of this.

You'd have to use an alternative method to get that, e.g. a Flash based uploader like SWFUpload. This also becomes possible again with the HTML 5 file API. I imagine you'd have to fetch the image data, and draw it into a canvas that is your preview image.

Edit: This jQuery library seems like the perfect way to go. It provides an API driven upload facility with image preview functionality that should work in all modern browsers (except IE). Thanks @Shadow Wizard!

Pekka
  • 418,526
  • 129
  • 929
  • 1,058
  • Possible with HTML5. [See this as well](http://stackoverflow.com/questions/6750543/show-the-image-preview-before-uploading-it-to-the-server) – Shadow The Vaccinated Wizard Feb 28 '12 at 11:18
  • @Shadow good point, added. (it's probably not going to be completely trivial to do. You'll have to have a Canvas element to draw your preview into... I wonder whether a ready-made upload widget exists that can do this.) – Pekka Feb 28 '12 at 11:20
  • @Shadow sweet! Consider making that an answer - *that* is the way to go, you'll have my upvote – Pekka Feb 28 '12 at 11:31
  • Not my code and personally don't like single line answers pointing to some external resource... add this to your (already good) answer to make it even more complete. :) – Shadow The Vaccinated Wizard Feb 28 '12 at 11:38
  • Im getting trouble in image upload and preview using JSP through Javascript. C://Fakepath/imag.jpg doesnt allow to read and write file in JSP page. Is there is any solution? – shahith Feb 28 '12 at 11:41
  • @shahith no, as said, you'll have to use a different method. See the link to the jQuery upload library. – Pekka Feb 28 '12 at 11:42
  • For item 2. Using protocol (`file://...`) shows local image in every browser. IE just adds the protocol automatically to the path in `src` if it is omitted. – Teemu Feb 28 '12 at 12:11
  • @Teemu nope: Embedding a `file://` image on a `http://` page doesn't work in any modern browser any more for security reasons. I know it for certain for FF > 3 and Chrome; I'm pretty sure IE (8?) is on the list, too. – Pekka Feb 28 '12 at 12:14
  • @Pekka Well, I tested it in local machine only... All browsers did show the image. – Teemu Feb 28 '12 at 12:27
  • Check out this pure JavaScript approach, including its answer and there Ray Nicholus' comment for the final solution: http://stackoverflow.com/questions/16430016/using-readasdataurl-for-image-preview – Jonathan Root Oct 17 '13 at 14:38
2

You can not preview images before actually uploading the image to server.

  1. Let user select the image to be uploaded (.jpg file, for example)

  2. Upload the file to server using AJAX

  3. Display a thumbnail using AJAX

In step 2 above, you may want to upload it to a temporary directory on server so that you can remove it in periodic cleanup.

Prasad Jadhav
  • 4,786
  • 16
  • 57
  • 79
Ram
  • 21
  • 1