在上傳之前預覽圖像在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); 
     }); 

希望得到任何幫助，以便自定義此代碼在同一頁面上多次使用。