Preview an image before upload not working in Internet Explorer 8

Question

I am using file upload to upload images then the image gets previewed on a div prior to submitting.

My HTML:

                 <div class="modal" id="definitionModal">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                          <h4>Definition</h4>
                        </div>
                        <div class="modal-body">
                          <div class="grid1">
                            <textarea>Example: Lorem Ipsum ignus sempres cunando valore sendre indire trane fact ilsa nid france</textarea>
                          </div>

                           <div class="image-upload">
                            <label for="uploadFile1">
                                <img class="upload-img" src="img/camera-icon.jpg">
                            </label>
                             <input class="uploadFile" id="uploadFile1" type="file" name="image" class="img" />
                            </div>

                          <div class="grid2">
                            <div class="imagePreview imagePreview1"></div>
                          </div>

                        </div><!-- end modal-body -->

                        <div class="modal-footer">
                          <a href="#" class="btn btn-primary">Save</a>
                          <a href="#" class="btn btn-primary">Save &amp; Add Another</a>
                          <a href="#" data-dismiss="modal" class="btn btn-primary btn-white">Cancel</a>
                        </div>
                      </div>
                    </div>
                  </div><!-- end Definition Modal -->

My CSS:

.modal .grid2 {display: none;}
.upload-img {height: 100px; width: 100px;}
.modal .grid2 {
    background: #ebebeb;
    height: 100px;
    padding: 5% 0;
}
    .grid2 img {display: flex; margin-left: 15%; width: 70px;}

    .imagePreview {
        width: 70px;
        height: 48px;
        margin: auto;
        position: relative;
        top: 0px;
        left: 17%;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }
    .uploadFile {margin-left: 15px; margin-top: 25px; color: #FFF; max-width: 95%;}

The JavaScript that makes it all work:

$(function() {
                $("#uploadFile1").on("change", function()
                {
                    var files = !!this.files ? this.files : [];
                    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

                    if (/^image/.test( files[0].type)){ // only image file
                        var reader = new FileReader(); // instance of the FileReader
                        reader.readAsDataURL(files[0]); // read the local file

                        reader.onloadend = function(){ // set image data as background of div
                            $(".imagePreview1").css("background-image", "url("+this.result+")");
                            $("#definitionModal .image-upload").css("display" , "none");
                            $("#definitionModal .grid2").css("display" , "block");
                        }
                    }
                });
            });

Now this works exactly how I want in all modern browsers. But when testing it on Internet Explorer 8 it does not. I would like to know if there is a workaround for IE8 as I need to support it also.

The live link for the website can be found at:
http://www.expertfrontend.com/test/index.html

(Clicking on the 'Add a fact' will open up the modal for the image upload)

Answer 1

I was able to make it work on Internet Explorer 8 using the code below. The problem is that if I have multiple file uploads I cant use the code below.

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

                reader.onload = function (e) {
                    $(".imagePreview1").css("background-image", "url("+this.result+")");
                    $("#definitionModal .image-upload").css("display" , "none");
                    $("#definitionModal .grid2").css("display" , "block");
                }

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

        $("#uploadFile1").change(function(){
            readURL(this);
        });

Would appreciate any help in order to customize this code to be used multiple times on the same page.