提交表单前在背景中显示所选图像

Question

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

我在这里找到了这段代码，对我来说很不错，但是可以显示在一个元素中，但我想对其进行修改，以使其作为背景显示在元素中...因为我对JS一无所知...我继续吗？

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

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

Answer 1

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

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

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