上传图片文件后不显示div背景预览答案

【问题标题】：Div background preview is not displayed after uploading image file上传图片文件后不显示div背景预览
【发布时间】：2018-07-31 21:44:37
【问题描述】：

我正在使用基本的 html 输入文件上传器来上传图像文件，而 div 'editor-image-1' 是上传图像的预览。我正在尝试使用以下代码处理此图像预览，但 div 不会更改其背景。正在触发控制台日志“成功”，但未显示图像：

$("#editor-upload-1").change(function() {
  $('#editor-image-1').css('background', "#FFF");
  var file = this.files[0];
  var imagefile = file.type;
  var valid = ["image/jpeg","image/png","image/jpg"];
  if(!((imagefile==valid[0]) || (imagefile==valid[1]) || (imagefile==valid[2]))) {
    $('#editor-image-1').css('background', "#F00");
    alert("Wrong image format");
    return false;
  } else {
    var reader = new FileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
  }
});


function imageIsLoaded(e) {
  console.log("success");
  $('#editor-image-1').css('background', 'url("' + e.target.result + '")');
};

【问题讨论】：

e.target.result 在您的imageIsLoaded 函数中的值是多少？
类似于：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAAZACAYAAAAhDI6nAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgA (...)

标签： javascript jquery image-uploading

【解决方案1】：

这很好用可能会有很多失败请参考下面的代码

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>functionality</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  </head>
<body>
 <style>
     .wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}
 </style> 
<input type="file" id="editor-upload-1">
<div class="wrapper">
        <div class="main" id="main">

        </div>
      </div>
<script>
    $(function(){
        $("#editor-upload-1").change(function() {
        $('#main').css('background', "#FFF");
        var file = this.files[0];
        var imagefile = file.type;
        var valid = ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==valid[0]) || (imagefile==valid[1]) || (imagefile==valid[2]))) {
            $('#main').css('background', "#F00");
            alert("Wrong image format");
            return false;
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
        });



    });

      function imageIsLoaded(e) {
      console.log("success");
       $('#main').css('background', 'url("' + e.target.result + '")');
       $('#main').css('top center no-repeat;');

      };
    </script>
</body>
</html>

【讨论】：

这确实有效，我认为我的问题可能出在我的 .css 文件中，它引用了 editor-image-1。
“您的代码工作正常”不是答案，应该是评论。无需鼓励用户为您的回答点赞——如果他们觉得这些回答有帮助，他们就会点赞。