Get binary image data from input type "file" using JavaScript/jQuery for use with picture preview with AJAX in WebMatrix [duplicate]

Question

I have had trouble when researching or otherwise trying to figure out how (if it's even possible) to get binary image data using JavaScript/jQuery from an html input element of type file.

I'm using WebMatrix (C#), but it may not be necessary to know that, if the purposes of this question can be answered using JavaScript/jQuery alone.

I can take the image, save it in the database (as binary data), then later show the pic on the page, from the binary data, after posting. This does, however, leave me without a pic preview, before uploading, for which I am almost certain I must use AJAX.

Again, this may not even be possible, but as long as I can get the binary image data, I believe I can push it to the server with AJAX and process the image the same way I would if I were taking it from a database (note that I don't save the image files themselves using GUID and all that,I just save the binary data).

If there is an easier way to show a pic preview using the input element, that would work fine, too, of course, as the whole idea behind me trying to do this is to show a pic preview before they hit the submit form button (or at least create that illusion).

**********UPDATE***********

I do not consider this a duplicate of another question because, my real question is:

How can I get image data from an input type "file", with JavaScript/jQuery?

If I can just get the data (in the right format) back to the server, I should be able to work with it there, and then return it with AJAX (although, I am absolutely no AJAX expert).

There is, according to the research that I have done, NO WAY to get picture previews in all IE versions using only javascript (this is because getting the full file path is seen, by them, as a potential security risk). I could ask my users to add the site to the trusted sites, but you don't usually ask users to tamper with those kinds of settings (not to mention the quickest way to make your site seem suspicious to users is to ask them to directly add your site to the trusted sites list. That's like sending an email and asking for a password. "Just trust me! I'm soooo safe!" :)

Contribute

Try looking through answers [here][1]. [1]: #4459879 – Whiney

@PavelAnossov My only regret about your answer is that you didn't put it in real answer form, and that I could not vote up said answer 8000 times! Why isn't this solution more widespread on the Internet? Works Perfectly! Way easier than what I was trying to do! If you post answer, I would love to accept! – Contribute

I did put it as an answer, it was converted to a comment as a trivial answer. – Whiney

@PavelAnossov well, that stinks.. lol – Contribute

@PavelAnossov Is there a version that works in IE without having to use AJAX or Server side? – Contribute

Answer 1

Short answer: Use the jQuery form plugin, it suports AJAX-like form submits even for file uploads.

tl;dr

Thumbnail preview is popular websites is usually done by a number of steps, basically the website do these steps:

1. upload the RAW image
2. Resize and optimise the image for data storage
3. Generate a temporary link to that file (usually stored in a server maintained HTTP session)
4. Send it back to the user, to enable a 'preview'
5. Actually store the image after user confirms the image

A few bad solutions are:

1. Most of the modern browsers has options to enable script access to local files, but usually you don't ask your users to tinker with those low level settings.
2. Earlier Internet Explorer (ah... yes it's a shame) and ancient versions of modern browsers will expose the full file path by reading the 'value' of file input box, which you can directly generates an tag and use that value. (Now it is replaced by some c:/fakepath/... thing.)
3. Use Adobe Flash to mimic the file selection panel, it can properly read local files. But passing it into JavaScript is another topic...

Hope these helps. ;)

UPDATE

I actually came across a situation that requires a preview before uploading, I'd like to also put it here. As I could recall, there were no transitional versions in modern browsers that do not implement FileReader before masking the real file path, but feel free to correct me if so. This solution should caters most of the browsers, as long as they are supported by jQuery.

// 1. Listen to change event
$(':file').change(function() {
  // 2. Check if it has the FileReader class
  if (!this.files) {
    // 2.1. Old enough to assume a real path
    setPreview(this.value);
  }
  else {
    // 2.2. Read the file content.
    var reader = new FileReader();

    reader.onload = function() {
      setPreview(reader.result);
    };

    reader.readAsDataURL();
  }
});

function setPreview(url) {
  // Do preview things.
  $('.preview').attr('src', url);
}

Floweret

thank you for your response, and really, really thank you for showing what NOT to do. I could see some people trying the things you've listed here as bad solutions, and even I can see the downsides to them. I do, however, very greatly shy away from plug-ins. I never get full control of them or get full integration for my specific purposes. The above commenter however did send me to this site, which is F'ing perfect! – Contribute

FileReader is introduced and implemented in the HTML5 era, Glad to know you only targets new browsers. Compatibility is a real headache. ;) – Floweret

Well.... didn't realize that it didn't work in IE and researching this suggests that I have to use AJAX or a temporary file to get it to work there. Is this true? Or is there a way to include IE with JavaScript only like this solution? Probably not, but maybe i just don't let them have previews if they use IE. After all, if you use IE than you deserve no perks... – Contribute

You make your choice. Normally saying, edge technologies better be considered an add-on to some basic functions, coz they are not guaranteed as much as the traditional way. – Floweret