在上传之前预览图像在Internet Explorer 8中不起作用

Question

我正在使用文件上传来上传图像，然后图像在提交之前在div上预览。

我的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 --> 

我的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%;} 

，使得它所有的工作中的JavaScript：在所有现代浏览器

$(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"); 
         } 
        } 
       }); 
      }); 

现在这个工程正是我想要。但是，在Internet Explorer 8上进行测试时，它不会。我想知道是否有IE8的解决方法，因为我也需要支持它。

活链接的网站，可以发现：
http://www.expertfrontend.com/test/index.html

（点击“添加一个事实”将打开的图片上传的模式）

Answer 1

我是能够使它使用下面的代码在Internet Explorer 8上工作。问题是，如果我有多个文件上传，我不能使用下面的代码。

 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); 
     }); 

希望得到任何帮助，以便自定义此代码在同一页面上多次使用。