2017-08-05 9 views
1

アップロードした画像を表示できる画像入力フィールドの上に境界線を表示する方法はありますか?入力画像フィールドの上に境界線を表示しますか?

私の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コードは次のとおりです。私は達成するためにAJAXを使用してインターネット上の多くのチュートリアルを見てきました

<?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(); 

?> 

そのような視覚化された結果が、私のコーディングレベルでは一種の難しいようです!私のコードの画像入力要素の上にダミーの画像で境界線を表示する簡単な方法はありますか?

+0

あなたは何をしたいですか?国境やイメージ? –

+0

返信いただきありがとうございます!ダミー画像との境界線はすばらしいでしょうが、境界線も非常に役立ちます! –

答えて

0

ただ、アイデア、あなたのコード

$('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" />

でこれを試してみて、それがあなたのために働くことを願っています。

+0

フレンドは完璧に動作しますが、アップロードするとimgはボーダーに表示されません!なぜこのようなことが起こるのか? –

関連する問題