Question

I have a javascript function that will show the image you’re about to upload before clicking submit. It merely shows the image on the page with you choose a file. This works in all browsers but IE. It’s a pretty simple javascript function. Any ideas why this wouldn’t render in IE? Thank you.

Here’s the Javascript in the head of the page:

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

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

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

This is the HTML for the empty image. After choosing a file it will be displayed in the img id=”blah”. This renderes properly in all browsers but IE.

<div id="question_submit_outside_holder">
    <input type="submit" name="question_reply_upload_image" id="questions_place_inline_image_form_submit_one" value="Place image" />
</div>

<div id="questions_form_image_upload_image_holder">
    <img id="blah" src="" /> <!-- img should be displayed here -->
</div>

UPDATE

This is how I append images to the post. It displays in all browsers but IE

<script type="text/javascript">
    image = '<img src="http://forum.site.com/.../<?php echo $_SESSION['user_id']; ?>/question_reply_images/<?php echo $image_name; ?>" alt="<?php echo $alt; ?>" />';
    document.getElementById('editor1').innerHTML += image;
    window.location = '#reply_textbox';
</script>

Answer 1

Of course it does not work in IE!
IE9 and below does not support FileReader API, which enables thumbnail preview in the code you posted.

Good news: IE10 does support FileReader API.
http://caniuse.com/filereader