Image doesn't display in the border
Question
I'm using the following code to upload profile images and it works fine, but the problem is that when i upload a picture it doesn't display in the border as it should be! Any thoughts why this happens?
<!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>
When I'm running this code on localhost the uploading procedure goes fine, but the problem is that the uploaded photo doesn't display in the border as it should be!
Any thoughts on how to solve this problem will be very useful as I'm newbie in coding.
Thanks in advance!
2 answers
solution1
1 ACCPTED 2017-08-05 14:16:18
This should work, here is the 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>
solution2
0 2017-08-05 14:10:53
I'm not sure what you mean by 'photo doesn't display in the border', but I'm guessing that you want the border to be right next to the image, and not have the gap you have now.
If you use inspect element in your browser and click on the declaration of the containing div you'll see that the padding gets between the image and the border. If you change padding to margin in the style tag the border ends up right next to the image.
.img-block {
border:2px solid cyan;
width: 200px;
margin: 100px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.