Question

我使用以下代码上传个人资料图片并且工作正常，但问题是当我上传图片时，它不会显示在边框中！有没有想过为什么会这样？

＆＃13;

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

＆＃13;

当我在localhost上运行此代码时，上传过程很顺利，但问题是上传的照片不会显示在边框中！

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

提前致谢！

Answer 1

这应该有用，这里是小提琴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>

Answer 2

我不确定你的意思是'照片没有显示在边框'，但我猜你想要边框就在图像旁边，而不是你现在的差距。

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

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

图像不会显示在边框中

2 个答案: