<?php $conn = new mysqli('localhost', 'root', '', 'db_image'); if(!$conn){ } ?>
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">PHP - Simple Image Upload</h3> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-2"></div> <div> <form method="POST" action="save_query.php" enctype="multipart/form-data"> <label>Name:</label> <input type="text" name="name"/> <div style="float:right;"> <div id = "preview" style = "width:150px; height :150px; border:1px solid #000;"> <center id = "lbl">[Photo]</center> </div> <input type = "file" id = "photo" name = "photo" /> </div> <div style="clear:both;"></div> <br/> <center><button class="btn btn-primary" name="submit"><span class="glyphicon glyphicon-save"></span> Save</button></center> </form> </div> <br /> <div class="col-md-12"> <table class="table table-bordered"> <thead> <tr> <th>Name</th> <th>Photo</th> </tr> </thead> <tbody> <?php require 'conn.php'; while($fetch = $query->fetch_array()){ ?> <tr> <td><?php echo $fetch['name']?></td> <td><center><img src="<?php echo "upload/".$fetch['photo']?>" width="100px" height="100px"></center></td> </tr> <?php } ?> </tbody> </table> </div> </div> </body> <script src="js/jquery-3.2.1.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $pic = $('<img id = "image" width = "100%" height = "100%"/>'); $lbl = $('<center id = "lbl">[Photo]</center>'); $("#photo").change(function(){ $("#lbl").remove(); var files = !!this.files ? this.files : []; if(!files.length || !window.FileReader){ $("#image").remove(); $lbl.appendTo("#preview"); } if(/^image/.test(files[0].type)){ var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onloadend = function(){ $pic.appendTo("#preview"); $("#image").attr("src", this.result); } } }); }); </script> </html>
<?php require_once 'conn.php'; if($_FILES['photo']['name'] != "" && $_POST['name'] != ""){ $name = $_POST['name']; $image_name = $_FILES['photo']['name']; $image_temp = $_FILES['photo']['tmp_name']; } } ?>