young3376 Ответов: 0

Как отобразить изображение, сохраненное в папке 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"&lt;html&gt;";
	echo"&lt;head&gt;";
echo"&lt;title&gt;Business_Blog  | Home &lt;/title&gt;";
echo"&lt;meta name='viewport' content='width=device-width, initial-scale=1'&gt;";
echo"&lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8' /&gt;";
echo"&lt;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' /&gt;";
echo "&lt;script type='applijewelleryion/x-javascript'&gt; addEventListener('load', function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } &lt;/script&gt;";
echo	"&lt;link href='css/bootstrap.css' rel='stylesheet' type='text/css' /&gt;";
//&lt;!-- Custom Theme files --&gt;
echo	"&lt;link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'&gt;";
echo	"&lt;link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;";
echo "&lt;link href='css/style.css' rel='stylesheet' type='text/css' /&gt;";	
echo	"&lt;script src='js/jquery-1.11.1.min.js'&gt;&lt;/script&gt;";
echo	"&lt;script src='js/bootstrap.min.js'&gt;&lt;/script&gt;";
echo"   &lt;/head&gt;";


 echo"      <div class="tc-ch">";
echo"         <div class="tch-img">";
echo"            <a href="singlepage.html">&lt;img src='images/$image' class='img-responsive' alt=''/&gt;</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>";
					//&lt;!-- technology-top --&gt;
			//&lt;!-- technology-top --&gt;
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 "&lt;img src=".$row['gambar']." /&gt;";
//echo "<p>".substr($row['konten'],0,200)."<a href="articles.php?id="> Read more</a></p>";
  echo"&lt;/html&gt;";  
}

$conn-&gt;close();
			?&gt;



Что я уже пробовал:

пробовал поместить изображение из базы данных в переменную, но это не работает,также пробовал повторить строку изображения из базы данных, но это не работает

0 Ответов