How to retrieve images from the database to the edit page form.

Goddy_1 0 Newbie Poster

10 Years Ago

I drew a picture of the database performance for editing. But I try not to choose a new image. Then press the update appears that it does not send the originals back.

If you choose a new image It was able to get regular updates. If not, select and click Update. The original image data can not be sent. And can not be displayed.

sorry i'm not good english

<?php
session_start();
//PUT THIS HEADER ON TOP OF EACH UNIQUE PAGE
if($_SESSION['Level'] != "Admin"){
   header("location:../index.php");

  header("Content-type: text/html; charset=utf-8");
}

include "config.php";

if(isset($_GET['u'])):
     if(isset($_POST['bts'])):

$sql="SELECT * FROM  image where image_id= '$image_id' ";

  $image_id = "";
  if(is_uploaded_file($_FILES['file']['tmp_name']))  {
    if($_FILES['file']['error'] == 0) {
      include "lib/IMager/imager.php";
      $img = image_upload('file');
      $img = image_to_jpg($img);
      $img = image_resize_max($img, 600, 300); //ให้ภาพกว้างไม่เกิน 600px สูงไม่เกิน 300px
      $f = image_store_db($img, "image/jpeg");

        $sql = "REPLACE INTO image VALUES('$image_id', '$f')";
      mysqli_query($mysqli, $sql);
      $image_id = mysqli_insert_id($mysqli);
    }
  }

  $t = $_POST['topic'];
  $c = $_POST['content'];
  $w = $_POST['writer'];
  $article_id = $_POST['article_id'];

$sql = "REPLACE INTO article VALUES('$article_id', '$t', '$c', '$w', NOW(), 0, '$image_id')";
  if(@mysqli_query($mysqli, $sql)) {
      $msg = "<div class='alert alert-success'>
      <span class='glyphicon glyphicon-info-sign'></span> &nbsp;ประกาศข่าวสารเรียบร้อยแล้ว<p/>
                            ระบบ\'จะนำคุณกำลับไปยังหน้าล็อคอินในอีก 5 วินาที.</p>
     </div>";

     header ("refresh:5; url=index.php");

  }
  else {
    echo '<h3 class="waringing">เกิดข้อผิดพลาดในการบันทึกข้อมูล กรุณาลองใหม่</h3>';

  }
          endif;
     endif;

/*

    $res = $mysqli->query("SELECT * FROM article WHERE article_id =".$_GET['u']);
     $row = $res->fetch_assoc();*/

   //ภาพดีฟอลต์ กรณีไม่ได้กำหนดรูปภาพเอาไว้

   echo $sql = "SELECT article.*, image.image_content
       FROM article LEFT JOIN image
       on article.image_id = image.image_id
       WHERE article_id =".$_GET['u'];
       $result = $mysqli->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="assets/css/core.css" rel="stylesheet" type="text/css">
  <link href="assets/css/components.css" rel="stylesheet" type="text/css">
  <link href="assets/css/colors.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->

  <!-- Core JS files -->
  <script type="text/javascript" src="assets/js/plugins/loaders/pace.min.js"></script>
  <script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
  <script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
  <script type="text/javascript" src="assets/js/plugins/loaders/blockui.min.js"></script>
  <!-- /core JS files -->

  <!-- Theme JS files -->
  <script type="text/javascript" src="assets/js/plugins/uploaders/fileinput.min.js"></script>

  <script type="text/javascript" src="assets/js/core/app.js"></script>
  <script type="text/javascript" src="assets/js/pages/uploader_bootstrap.js"></script>

  <script type="text/javascript" src="assets/js/plugins/ui/ripple.min.js"></script>
  <!-- /theme JS files -->
  <!-- Theme JS files -->
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="assets/js/pages/editor_ckeditor.js"></script>

  <script type="text/javascript" src="assets/js/plugins/ui/ripple.min.js"></script>
  <!-- /theme JS files -->

<script>
$(function() {
  $(document).on('change', '#file', function() {
    if(this.files[0].size > 512000) {
      alert('ไฟล์ภาพมีขนาดใหญ่เกินกำหนด (500 KB) อาจมีปัญหาในการอัปโหลด กรุณาเปลี่ยนใหม่');
      //$(this).replaceWith($(this).clone());
      $('input:file').clearInputs();  //อยู่ในไลบรารี form.js
    }
  });
});
</script>
</head>
<body>
<div><?php require_once("/include/header.php"); ?></div>

  <?php require_once("/include/main.php"); ?>

  <!-- Page container -->
  <div class="page-container">

    <!-- Page content -->
    <div class="page-content">

      <!-- Content area -->
        <div class="content">
    <!-- Main content -->
      <div class="content-wrapper">
            <!-- CKEditor readonly API -->
          <div class="panel panel-flat">
            <div class="panel-heading">
              <h5 class="panel-title">บทความใหม่</h5>
              <div class="heading-elements">
                <ul class="icons-list">
                          <li><a data-action="collapse"></a></li>
                          <li><a data-action="reload"></a></li>
                          <li><a data-action="close"></a></li>
                        </ul>
                      </div>

            </div>

            <div class="panel-body">

              <?php
              while($row = mysqli_fetch_array($result)) {
                $image = $row['image_content'];
                $images = $row['image_id'];
                $article_id = $row['article_id'];
                $topic = $row['topic'];
                $article_text = $row['article_text'];
                $writer = $row['writer'];

              ?>

              <form id="new-article" method="post" enctype="multipart/form-data">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                    <label class="control-label text-semibold">รูปหัวบทความ:</label>

                    <input type="hidden" name="MAX_FILE_SIZE" value="512000">
                    <input type="file" name="file" id="file" value="<?php $image ?>" class="file-input" data-show-upload="false" data-show-caption="true" data-show-preview="true" accept="image/*" >

                    <br/>
                    <?php
                    echo "<img src='data:image/jpeg;base64,".base64_encode($image)."' class='img-responsive'   />";
                    ?>

                    </div>
                  </div>

              <div class="col-md-6">
                    <div class="form-group">
                      <label class="text-semibold">หัวข้อ:</label>
                        <input type="hidden" name="article_id" value="<?php echo $article_id ?>">
                        <input type="hidden" name="image_id" value="<?php $images; ?>" >
                        <input type="text"  value="<?php echo $topic; ?>" name="topic" class="form-control" placeholder="หัวข้อ" required>

                    </div>
                  </div>
                </div>

                <div class="mb-15">
                  <textarea name="content"  id="editor-full" rows="4" cols="4">
                                  <?php echo $article_text; ?>
                                </textarea>
                      </div>
                        <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                            <label class="control-label text-semibold">ชื่อผู้เขียน:</label>
            <input type="text" class="form-control" name="writer" value="<?php echo $writer; ?>" placeholder="ชื่อผู้เขียน *"required>
              </div>
                  </div>
                      <div class="text-right">
                        <button type="submit" name="bts" class="btn bg-teal-400">Submit form <i class="icon-arrow-right14 position-right"></i></button>
                      </div>
                      <?php } ?>
                    </form>
            </div>
          </div>

</article>
<script type="text/javascript">
CKEDITOR.replace( 'editor-full', {
    filebrowserBrowseUrl: './browser/imgbrowser.php',
    filebrowserUploadUrl: './uploader/upload.php'
});
</script>

</body>
</html>
<?php @mysqli_close($mysqli); ?>

<article>

1 Contributor
0 Replies
194 Views

Dani AI

Generated 6 Months Ago

Quick diagnosis for : the edit flow is clearing the article's existing image id and never restoring it when no new file is uploaded. Also the hidden input for image_id in the form is not echoing the current id, so the submitted form carries no image reference. The combination makes the update replace the article with a blank/empty image reference. The fix is simple: preserve the current image_id unless a new upload replaces it, and use an UPDATE (not a blind replace) with prepared statements.

A minimal, safe workflow to follow:

On page load, fetch article + image id and output it into a hidden field (make sure you actually echo the value).
On submit, start with $image_id = (int)$_POST['image_id'] (or fetch from DB again). Only when $_FILES['file'] contains a new file, process the upload and overwrite $image_id with the new image's id.
Run a prepared UPDATE for the article row (topic, text, writer, image_id) where article_id = ?.

Example fixes to drop into the form and handler:

<input type="hidden" name="image_id" value="<?php echo (int)$images; ?>">

$image_id = isset($_POST['image_id']) ? (int)$_POST['image_id'] : 0;
if (!empty($_FILES['file']['tmp_name'])) {
  // validate and store file -> set $image_id = newly_inserted_image_id
}
$stmt = $mysqli->prepare("UPDATE article SET topic=?, article_text=?, writer=?, image_id=? WHERE article_id=?");
$stmt->bind_param("sssii", $topic, $article_text, $writer, $image_id, $article_id);
$stmt->execute();

Extra tips: validate file type/size, cast all IDs to int, avoid concatenating unsanitized $_GET/$_POST into SQL, and prefer storing image files on disk with a path in the DB for performance (or use a small image-serving script like show_image.php?id=... that sets the correct Content-Type and streams the blob). These changes will keep the original image when no new upload is provided and make updates safer and more predictable.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.