图片不显示在边框中

Question

我正在使用以下代码上传个人资料图片，它工作正常，但问题是当我上传图片时，它没有按应有的方式显示在边框中！想知道为什么会这样吗？

<!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>form practice</title>
 
 <!--Calculate age from dob script-->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){

            $("#dob").change(function(){
               var value = $("#dob").val();
                var dob = new Date(value);
                var today = new Date();
                var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
                if(isNaN(age)) {

                // will set 0 when value will be NaN
                 age=0;

                }
                else{
                  age=age;
                }
                $('#age').val(age);

            });

        });
        </script>
  
  <!--End of Calculate age from dob script-->
  
     <!--Upload Picture Script-->
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
           $('input[type=file]').change(function () {
        $('#dummyImg').attr('src',URL.createObjectURL(event.target.files[0]));
});
</script>

     <!--End of Upload Picture Script-->

<style>
#dummyImg{width:100%;}
.img-block{border:2px solid cyan;
width:200px; padding: 100px;}
</style>
    </head>

    <body>

    <div class="form2" id="form2" name="form2">

    <form action="php/form2.php" method="post" id="Personalinfo">

    <label for="fname">Name:</label>
    <input type="text" id="fname" name="firstname" placeholder="Client Name..">

    <label for="lname">Lastname:</label>
    <input type="text" id="lname" name="lastname" placeholder="Client Lastname..">

    <label for="dob">Birthday:</label>
    <input type="text" id="dob" name="dob" placeholder="yyyy/mm/dd..">

    <label for="age">Age:</label>
    <input type="text" id="age" name="age" placeholder="Client Age.."><br><br>
 
 <div class="img-block">
  <img src="dummyImg.png" id="dummyImg"  />
</div>
<label for="profilepic">Profile Picture:</label>
<input type="file" id="profilepic" name="profilepic" accept="image/*" placeholder="Profile Pic.." border="5"><br><br>

    <input type="submit" name="submitForm2" value="Submit">


    </form>
    </div>

    </body>
    </html>

当我运行这段代码在本地主机上时，上传过程正常，但问题是上传的照片没有按应有的方式显示在边框中！

任何关于如何解决这个问题的想法都将非常有用，因为我是编码新手。

提前致谢！

Answer 1

我不确定你所说的“照片没有显示在边框中”是什么意思，但我猜你希望边框紧挨着图片，而不是你所拥有的空隙现在。

如果您在浏览器中使用 inspect element 并单击包含 div 的声明，您会看到填充位于图像和边框之间。如果您在 style 标记中将填充更改为边距，则边框会紧挨着图像结束。

.img-block {
    border:2px solid cyan;
    width: 200px;
    margin: 100px;
}

Answer 2

这应该可以，这是 fiddle https://jsfiddle.net/s4z7fof8/

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#dummyImg').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$(function() {
    $("input:file").change(function (){
        console.log("File selected");
        readURL(this);
    });
});
</script>

图片不显示在边框中

Image doesn't display in the border

javascript

css

image

border