个人中心
gpt4 book ai didi

javascript - 图片不显示在边框中

转载 作者：太空宇宙 更新时间：2023-11-04 08:21:12 25 4
gpt4 key购买 nike

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

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

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

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

提前致谢!

最佳答案

这应该可以，这是 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>

关于javascript - 图片不显示在边框中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45522690/

25 4 0
文章推荐： c - 为什么我们需要在操作系统中进行地址虚拟化？
文章推荐： python 子进程
文章推荐： java - 使用集合的集合生成 XML
文章推荐： python - 使用 Python 解析逗号分隔文件并添加货币字段
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com