CODEWITHSUNDEEP
javascriptasp-classic
scatman
scatman

Reputation: 14555

loading an image through javascript

is there a way to load the full binary of an image in javascript?
what i want to do is to allow the user to preview an image before uploading it.
ie the user selects an image on his local drive (C:\image.jpg) , view it, and decides to upload or cancel.
i tried to set the source to the image path, but it didn't work since it is outside the webapplication project folder.
any help?

Upvotes: 0

Views: 880

Answers (6)

scatman
scatman

Reputation: 14555

thx for your posts, but i ended up creating a temp folder on the server that stores the uploaded image using ajax. and when the user saves the data, the image is moved to another location, and the temp folder is deleted.

Upvotes: 2

BalusC
BalusC

Reputation: 1108692

As answered several times, you can't do this with plain HTML/JavaScript due to security restrictions. You need to send the image anyway. You can however handle this using a Java Applet since it runs entirely at the client machine and offers more control than HTML/JS. There are several free and ready-to-use ones. JumpLoader looks good and some major sites also uses it. With Flash it should also be possible, but I am not sure which ones offers this functionality. Check/tryout some Flash Multi File Uploaders.

Upvotes: 0

Neall
Neall

Reputation: 27114

This is available in some browsers via the HTML5 file access API. Here is the Firefox documentation for file access.

Upvotes: 0

Luca Matteis
Luca Matteis

Reputation: 29267

You need server cooperation to access the image binary data. You won't be able to use the "Upload Form" to access the file info without uploading it to a server.

You could however do something like tell the user to paste the source binary data of the image in a textarea or something, then you can use JavaScript to load that binary data and display the actual image.

Upvotes: 0

user170442
user170442

Reputation:

There is no easy way, what You could do:

  • Preload image with some ajax file uploader to temp area and then let user decide
  • Use some third party written solution (f.ex. some flash component)

Here there is also similar question: is it possible to preview local images before uploading them via a form?

Upvotes: 0

Web Logic
Web Logic

Reputation:

You can do something like this:

<img id="preview" src="" style="display:none;" />

<form>
....
<input type="file" id="file" />
....
</form>

<script type="text/javascript">
  var file = document.getElementById("file");
  var img = document.getElementById("preview");

  file.onchange = function(){
    img.src = file.value;
    img.style.display = 'block';
  };
</script>

Upvotes: 0

Related Questions