照片预览在IE中无效

时间:2016-08-06 17:38:57

标签: javascript jquery html5

照片预览在IE中不起作用,但它在chrome和firefox中运行良好,

$(function() {
  $("#uploadFile").on("change", function()
                      {
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return; 

    if (/^image/.test( files[0].type)){ 
      var reader = new FileReader();
      reader.readAsDataURL(files[0]); 

      reader.onloadend = function(){ 
        $("#imagePreview").css("background-image", "url("+this.result+")");
      }
    }
  });
});
#imagePreview {
  width: 180px;
  height: 180px;
  background-position: center center;
  background-size: cover;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imagePreview"></div>
<input id="uploadFile" type="file" name="image" class="img" />

请参阅http://jsbin.com/hofusomiko/1/edit?html,css,js,output

0 个答案:

没有答案