在輸入圖像字段上方顯示邊框？

有沒有辦法在上傳圖片可以顯示的圖片輸入字段上方顯示邊框？在輸入圖像字段上方顯示邊框？

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

和存儲在庫MySQLi數據庫中的數據我的PHP代碼：

<?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來實現在網上看到很多教程這樣的可視化效果，但對我的編碼水平來說似乎是一種困難！有沒有簡單的方法來顯示我的代碼中圖像輸入元素上方的虛擬圖片的邊框？

來源

2017-08-05 thanos_zach

那你想要什麼？一個邊框或圖像？ –

感謝您的回覆！一個帶有虛擬圖片的邊框將非常棒，但只是一個邊框也會非常有用！ –

只是一個想法，你的代碼試試這個

$('input[type=file]').change(function() { 
 
\t $('#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" />

希望它會爲你工作。

來源

2017-08-05 11:18:46

朋友它完美的作品，但是當我上傳img不顯示在邊框！任何想法爲什麼會發生？ –

在輸入圖像字段上方顯示邊框？

回答

相關問題