Как отобразить изображение, сохраненное в папке image и path в базе данных mysql в bootstrap div
я создаю сайт информационного бюллетеня и у меня возникают проблемы с отображением изображения, сохраненного в папке и пути в базе данных ниже приведен мой код для вставки изображения и других необходимых данных и работает нормально
<?php date_default_timezone_set('Africa/lagos'); if(isset($_POST['save'])) { $getId=mysqli_fetch_row(mysqli_query($con,"select max(id) from berita")); if(!empty($_FILES['foto']['tmp_name'])) { $ext=strtolower(substr($_FILES['foto']['name'],-3)); if($ext=='gif') $ext=".gif"; else $ext=".png"; move_uploaded_file($_FILES['foto']['tmp_name'], "../img/" . basename(($getId[0]+1).$ext)); } mysqli_query($con,"insert into berita values('','".date('y-m-d')."','".($getId[0]+1).$ext."','$judul','$konten')"); echo " <script> location.assign('index.php?page=berita&ps=true1'); </script> "; } elseif(isset($_POST['update'])) { if(!empty($_FILES['foto']['tmp_name'])) { unlink("../img/$gambar"); $ext=strtolower(substr($_FILES['foto']['name'],-3)); if($ext=='gif') $ext=".gif"; else $ext=".png"; move_uploaded_file($_FILES['foto']['tmp_name'], "../img/" . basename(($_GET['id']).$ext)); mysqli_query($con,"update berita set judul='$judul',gambar='".$_GET['id'].$ext."',konten='$konten' where id='".$_GET['id']."'"); } else mysqli_query($con,"update berita set judul='$judul',konten='$konten' where id='".$_GET['id']."'"); echo " <script> location.assign('index.php?page=berita&ps=true2'); </script> "; } /*pesan berhasil update*/ if(isset($_GET['ps'])=='true2') echo "<div class='alert alert-success' role='alert'>Data Berhasil Terupdate</div>"; elseif(isset($_GET['ps'])=='true1') echo "<div class='alert alert-success' role='alert'>Data Berhasil Terimpan</div>"; if(isset($_GET['id'])) $data=mysqli_fetch_row(mysqli_query($con,"select * from berita where id='".$_GET['id']."'")); ?> <style> #image-holder { margin-top: 8px; } #image-holder img { border: 8px solid #DDD; max-width:100%; } </style> <div class="row"> <div class="col-md-12"> <div class="box box-info"> <div class="box-header with-border"> <h3 class="box-title">Form Input Berita</h3> </div> <form class="form-horizontal" method="post" enctype="multipart/form-data"> <input type="hidden" name="id" value="<?php echo isset($_GET['id'])?$_GET['id']:''; ?>"> <input type="hidden" name="gambar" value="<?php echo isset($data[2])?$data[2]:''; ?>"> <div class="box-body"> <div class="form-group"> <label for="dua" class="col-sm-2 control-label">Tanggal</label> <div class="col-sm-10"> <input type="text" class="form-control" id="dua" value="<?php echo isset($_GET['id'])?$data[1]:date('d-m-Y'); ?>" disabled> </div> </div> <div class="form-group"> <label for="tiga" class="col-sm-2 control-label">Judul Berita</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Judul" name="judul" id="tiga" value="<?php echo isset($data[3])?$data[3]:''; ?>"> </div> </div> <div class="form-group"> <label for="tiga" class="col-sm-2 control-label">Isi Berita</label> <div class="col-sm-10"> <textarea class="form-control konten" placeholder="Isi Berita" name="konten"><?php echo isset($data[4])?$data[4]:''; ?></textarea> </div> </div> <div class="form-group"> <label for="tiga" class="col-sm-2 control-label">Gambar</label> <div class="col-sm-10"> <input type="file" accept="image/*" name="foto" class="form-control" id="foto"> <div id="image-holder"> <?php if(isset($_GET['id'])) echo "<img src='../img/$data[2].'?rand='".rand()."' alt=''>"; ?> </div> <script> $("#foto").on('change', function () { //Get count of selected files var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); var x = document.getElementById("foto"); var file = x.files[0]; if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "gif") { if (typeof (FileReader) != "undefined") { //loop for each file selected for uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader./>", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("This browser does not support FileReader."); } } else { alert("hanya boleh foto bertype PNG, JPG dan GIF"); var control = $("#foto"); control.replaceWith(control.val('').clone(true)); } }); </script> </div> </div> <!--input image awal--> </div> <!-- /.box-body --> <div class="box-footer"> <input onclick="change_url()" type="submit" class="btn btn-info pull-right" value="Save" name="<?php echo isset($_GET['id'])?'update':'save'; ?>"> </div> <!-- /.box-footer --> </form> </div> </div> <!--/.col (right) --> </div> <!-- /.row -->
and below is my code to display information from database.every thing is working fine just that the image does not display it only display a small image default icon below is my code to index.php code to display data <pre lang="PHP"> //load all news from the database and then OREDER them by newsid //you will notice that newlly added news will appeare first. //also you can OREDER by (dtime) instaed of (news id) $sql = "SELECT * FROM berita ORDER BY id DESC LIMIT 0, 1"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { $image= $row['gambar']; $title = $row['judul']; $description = $row['konten']; $time = $row['tanggal']; echo"<html>"; echo"<head>"; echo"<title>Business_Blog | Home </title>"; echo"<meta name='viewport' content='width=device-width, initial-scale=1'>"; echo"<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />"; echo"<meta name='keywords' content='Business_Blog Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design' />"; echo "<script type='applijewelleryion/x-javascript'> addEventListener('load', function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>"; echo "<link href='css/bootstrap.css' rel='stylesheet' type='text/css' />"; //<!-- Custom Theme files --> echo "<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>"; echo "<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>"; echo "<link href='css/style.css' rel='stylesheet' type='text/css' />"; echo "<script src='js/jquery-1.11.1.min.js'></script>"; echo "<script src='js/bootstrap.min.js'></script>"; echo" </head>"; echo" <div class="tc-ch">"; echo" <div class="tch-img">"; echo" <a href="singlepage.html"><img src='images/$image' class='img-responsive' alt=''/></a>"; echo "</div>"; //echo" <a class="blog blue" href="singlepage.html"> Technology</a>"; echo" <h3><a href="singlepage.html">$title</a></h3>"; echo" <p>".substr($description,0,200)."<a href="articles.php?id="> Read more</a></p>"; echo" <div class="blog-poast-info">"; echo" <ul>"; echo" <li> <i class="glyphicon glyphicon-user"> </i><a class="admin" href="#">Admin </a><li>"; echo" <li> <i class="glyphicon glyphicon-calendar"> </i>$time</li>"; echo" <li> <i class="glyphicon glyphicon-comment"> </i><a class="p-blog" href="#">3 comments</a></li>"; echo" <li> <i class="glyphicon glyphicon-heart"> </i><a class="admin" href="#">5 favourites</a></li>"; echo" <li> <i class="glyphicon glyphicon-eye-open"> </i>1.128</li>"; echo" </li></li></ul>"; echo" </div> "; echo" </div>"; echo" <div class="clearfix"></div>"; //<!-- technology-top --> //<!-- technology-top --> echo" <div class="soci">"; echo" <ul>"; echo" <li><a href="#" class="facebook-1"> </a></li>"; echo" <li><a href="#" class="facebook-1 twitter"> </a></li>"; echo" <li><a href="#" class="facebook-1chrome"> </a></li>"; echo" <li><a href="#"><i class="glyphicon glyphicon-envelope"> </i></a></li>"; echo" <li><a href="#"><i class="glyphicon glyphicon-print"> </i></a></li>"; echo" <li><a href="#"><i class="glyphicon glyphicon-plus"> </i></a></li>"; echo" </ul>"; echo" </div>"; //echo "<img src=".$row['gambar']." />"; //echo "<p>".substr($row['konten'],0,200)."<a href="articles.php?id="> Read more</a></p>"; echo"</html>"; } $conn->close(); ?>
Что я уже пробовал:
пробовал поместить изображение из базы данных в переменную, но это не работает,также пробовал повторить строку изображения из базы данных, но это не работает
Richard Deeming
Ваш код уязвим для SQL-инъекция[^]. НИКОГДА используйте конкатенацию строк для построения SQL-запроса. ВСЕГДА используйте параметризованный запрос.
Все, что вы хотели знать о SQL-инъекции (но боялись спросить) | Трой Хант[^]
Как я могу объяснить SQL-инъекцию без технического жаргона? | Обмен Стеками Информационной Безопасности[^]
Шпаргалка по параметризации запросов / OWASP[^]