Отображать рамку над полем входного изображения?

Question

Отображать рамку над полем входного изображения?

Можно ли отобразить рамку над полем ввода изображения, в котором может отображаться загруженное изображение?

Мой HTML-код:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>form practice</title>

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

<style>

#profilepic {
border-style: solid;
border-width: 2px;
margin-top: 150px;
}

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

<label for="profilepic">Profile Picture:</label>
<input type="file" id="profilepic" name="profilepic" accept="image/*" placeholder="Όνομα Πελάτη.." border="5"><br><br>

<input type="submit" name="submitForm2" value="Submit"></form>
</div>

</body>
</html>

И мой PHP-код, который хранит данные в базе данных MySQLi:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['submitForm2'])) {
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$dob = $_POST['dob'];
$age = $_POST['age'];
$profilepic = $_POST['profilepic'];

$sql = "INSERT INTO info (firstname, lastname, dob, age, profilepic)
VALUES ('{$firstname}', '{$lastname}', '{$dob}', '{$age}', '{$profilepic}')";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

} else {
echo "Are you sure you enter a firstname and the name of your html submit
is submitForm";
}

$conn->close();

?>

Я видел много учебных пособий в Интернете, использующих AJAX для достижения такого визуализированного результата, но это кажется довольно сложным для моего уровня кодирования! Есть ли простой способ отобразить границу с фиктивной картинкой над элементом ввода изображения в моем коде?

1

ajax border image mysqli php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Просто идея, попробуйте это с вашим кодом

$('input[type=file]').change(function () {
$('#dummyImg').attr('src',URL.createObjectURL(event.target.files[0]));
});

#dummyImg{width:100%;}
.img-block{border:2px solid cyan;width:400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-block">
<img src="" id="dummyImg"  />
</div>
<label for="profilepic">Profile Picture:</label>
<input type="file" id="profilepic" name="profilepic" accept="image/*" placeholder="Όνομα Πελάτη.." border="5"><br><br>
<input type="submit" name="submitForm2" value="Submit" />

0

Другие решения

Других решений пока нет …

Источник