Question

I am trying to design a module in which I would like to show a preview of the image to the user before he uploads the image to database.

I have found a solution which works for Firefox but is not working for IE and Chrome…Can someone help me out.

Here is my code:-

     function imageURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#replaceMe').attr('src', e.target.result)
                 .width(100)
                 .height(100);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

And I am calling this function on change event of the file input control:-

<input type="file" class="file" onchange="imageURL(this)" />

And also I have tried this url steps but it doesnt work for IE7 and 8 and Chrome.

Answer 1

There is no cross platform way to accomplish this using only HTML/JavaScript. It is possible, however, using a very basic programmatic approach:

Step 1: Binding to Blur
Bind a “blur” event to your file input field, like so:

$("#input_field").blur(function(event){
    alert("Blur!");
});

Step 2: Server-Side Thumbnailing
You’re going to have to write a small application/route on your server side application that simply accepts a form that contains in input file, and generates a temporary output file. You could even just temporarily store the filedata in your database, rather than write individual files to disk; the implementation is up to you. When this route receives a request, it should thumbnail the image, and then return a path to that thumbnail

Step 3: AJAX
First, choose one of the many available jQuery “AJAX Upload” libraries to make the form that contains your file upload it via AJAX. Apply that library to the form(For the examples below, I’ll use ajaxForm.), and then modify your blur:

// AJAX the form
$("#your_form").ajaxForm({
    success: function(response){
        // Insert your returned thumbnail into your DOM.
    }
});

// Modify the blur
$("#input_field").blur(function(event){
    $("#input_field").closest("form").submit();
});

Issues:
There will be issues with the approach above. Making your form AJAX will mean submitting it regularly will break – not to mention that the thumbnail route will be different than the actual form submission route. Use some workarounds (for example, have a secondary hidden form, and the blur event copies the file-upload onto it, and then submits it).