Question

我有一个表单，您可以在其中添加横幅图片。我希望在提交表单之前在div的背景中显示所选图片。

我发现这里的代码看起来不错并且对我有用，但是它显示在一个元素中我想修改它以烘焙它在元素中显示为背景......因为我对JS一无所知。我该怎么办？

＆＃13;

.banner{
  display: flex;
  align-items:flex-end;
  height:250px;
  background-size: 1112px 250px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(32, 117, 252, 0.5);
  border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
  <div class="header">
    <div class="headertitle">Add a New System : 
      <input type="text" name="system" placeholder="System's name" 
             value="<?php if(isset($_POST["addsystem"]) and !empty($_POST["system"])){echo $_POST["system"];}?>">
    </div>
    <div class="headerline">Add a Banner <i>(1112px X 250px)</i> :
      <input type="file" name="banner" id="profile-img">
    </div>
  </div>
  <script type="text/javascript">
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#profile-img-tag').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $("#profile-img").change(function(){
      readURL(this);
    });
  </script>
</div>

＆＃13;

Answer 1

只需将其设置为具有background值的元素的CSS url()，并确保id profile-img-tag的元素是可以包含的元素背景，如div。

＆＃13;

.banner{
  display: flex;
  align-items:flex-end;
  height:250px;
  background-size: cover;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(32, 117, 252, 0.5);
  border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
  <div class="header">
    <div class="headertitle">Add a New System : 
      <input type="text" name="system" placeholder="System's name" 
             value="<?php if(isset($_POST["addsystem"]) and !empty($_POST["system"])){echo $_POST["system"];}?>">
    </div>
    <div class="headerline">Add a Banner <i>(1112px X 250px)</i> :
      <input type="file" name="banner" id="profile-img">
    </div>
  </div>
  <script type="text/javascript">
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('.banner').css('background', "url(" + e.target.result + ")" );
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $("#profile-img").change(function(){
      readURL(this);
    });
  </script>
</div>

＆＃13;

在提交表单之前在后台显示所选图像

1 个答案: