Question

I’m working with jquery 1.8.3 and I’m trying to make a cross-browser image preview.
This has to be supported on IE6 and up, Firefox and Chrome. Especially IE is important and that’s where all my heartache begins.

The html I’m using is the following:

<div>
    <div id="preview">
    </div>
    <div>
        <input type="file" name="companypicture" id="companypicture" />
        <a href="" class="overviewdelete">Delete</a>
    </div>
</div>

The jquery I’m trying to get to work:

$('#companypicture').on('change', function () {

        var file = $('#companypicture').val();
        var image = $('<img>').attr('src', file);
        $('#preview').html(image);
    });

I have also tried:

$('#companypicture').on('change', function () {

        var file = $('#companypicture').val();
        var html = '<img src="' + file + '" alt="" />';
        $('#preview').html(html);
    });

All this does is give me a broken link. I get the alt text of the image, because the link isn’t correct.

I have also tried the FileReader. FileReader works in IE10, but not on 6-7-8-9. Since it has to work from IE6 and up, there was no solution there.

As I’ve been trying to find answers on Google, I can’t seem to find any there. I hope somebody here can help me.

EDIT: The current suggestion is that I upload the file to my server, then use the link from there to show the image and finally to delete the link again.

Answer 1

You cannot get the full local path of a file upload in any browser. It is a security feature built into the browser. You can save that image temporary somewhere and delete after user clicks save. Use jQuery ajax() to save image and after you will easily get image path 🙂