Get binary image data from file input type using JavaScript / jQuery for use with image preview using AJAX in WebMatrix

Question

I am having trouble researching or trying to figure out how (if possible) to get binary image data using JavaScript / jQuery from an input element of an html file of type.

I am using WebMatrix (C #), but it may not be necessary to know what if the objectives of this question can be solved using only JavaScript / jQuery.

I can take an image, save it in a database (as binary data), and then show pic. on the page, from binary data, after publication. This, however, leaves me without a pic preview before downloading, for which I am pretty sure I should use AJAX.

Again, this may not even be possible, but so far I can get the binary image data, I believe that I can send it to the server using AJAX and process the image in the same way as if I took it from the database (note that I do not save the image files themselves using the GUID, and all this, I just save the binary data).

If there is an easier way to show a pic preview with an input element, this will work fine too, since the whole idea behind me trying to do this is to show a pic preview before they get to submit (or at least create an 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 using JavaScript / jQuery?

If I can just return the data (in the correct format) back to the server, I have to work with it there, and then return it using AJAX (although, I'm absolutely not an AJAX expert).

According to my NO WAY study, to get a preview of images in all versions of IE using only javascript (this is because viewing the full path to the file is considered by them as a potential security risk). I could ask my users to add the site to reliable sites, but you usually don’t ask users to change these settings (not to mention the fastest way to make your site suspicious for users, by asking them to directly add your site to the list of trusted sites. It's like sending an email and asking for a password. "Just trust me, I’m sure of security!" :)

Answer 1

Short answer: use the jQuery form plugin, it supports an AJAX-like form that is submitted even for uploading files.

TL; dg

Thumbnail previews are popular websites, usually performed in a few steps, mainly a website does the following:

• upload image in RAW format
• Resize and optimize image storage
• Create a temporary link to this file (usually stored in an HTTP session supported by the server).
• Send it to user to enable preview
• Actually save image after user confirm image

Some bad decisions:

• Most modern browsers have options to enable access to local script files, but usually you don’t ask your users to bother with these low-level settings.
• Earlier Internet Explorer (ah ... yes, this is a shame) and ancient versions of modern browsers will reveal the full path to the file by reading the “value” of the file input field, which you can directly generate a tag and use this value, (Now it is replaced by some c : / fakepath / ... thing.)
• Use Adobe Flash to simulate a file selection panel, it can correctly read local files. But passing it to JavaScript is another topic ...

Hope this helps;)

UPDATE

In fact, I came across a situation that requires a preview before downloading, I would also like to put it here. As far as I could remember, in modern browsers there were no transitional versions that do not implement FileReader before masking the real path to the file, but do not hesitate to fix me if this is so. This solution should serve most browsers, if 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); }