Блог

Главная - Вопросы по программированию - Простой код для просмотра и сохранения изображения в базе данных

Простой код для просмотра и сохранения изображения в базе данных

#javascript #php #html

#javascript #php #HTML

Вопрос:

Я разрабатывал веб-сайт, я столкнулся с трудностью сохранения изображения в базе данных.

Через форумы в Интернете я получил этот код с самого начала <form&&t; . Этот код почти идеален, но у него есть только одна особенность, этот код сохраняет прямое изображение в базе данных, как только получает инструкцию для отправки изнутри первого <form&&t; .
В этом методе, если пользователь выберет 1000 изображений и нажмет на отправить, сервер примет инструкцию без какого-либо фильтра. Итак, мне нужно найти способ, чтобы пользователь мог выбрать изображение на своем устройстве, нажать «Отправить», это изображение появится на экране в виде предварительного просмотра, и отправлять его на сервер только тогда, когда все данные в обеих формах будут вставлены.

Я уже разработал действие второго <form&&t; , в нем я получаю через post все данные из метки, а переменная $nameima& сохраняется в MySQL. Когда мне нужно его отобразить, я бы поискал в базе данных, который использовал echo '<div&&t; <im& src = "./ ima&es /'. $ nameima&. '" width = "200"&&t; </div&&t;'; .

Код здесь:

 <?php 
  // Start session, check lo&in/lo&out
  session_start(); 

  if (!isset($_SESSION['username'])) {
    $_SESSION['ms&'] = "You must lo& in first";
    header('location: lo&in.php');
  }
     
  if (isset($_GET['lo&out'])) {
    session_destroy();
    unset($_SESSION['username']);
    header("location: lo&in.php");
  }   
?&&t;

<!DOCTYPE html&&t;
<html&&t;
  <head&&t;
    <title&&t;Home</title&&t;
    <link rel="stylesheet" type="text/css" href="stylesheetini.css"&&t;
    <meta charset="utf-8"&&t;
    <meta name="viewport" content="width=device-width, initial-scale=1"&&t;
      
    <script src="https://ajax.&oo&leapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&&t;</script&&t;
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&&t;</script&&t;
    <script src="https://ajax.&oo&leapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&&t;</script&&t;
    <script&&t;
      jQuery('document').ready(function() {
        jQuery('#ajax_form').submit(function() {
          var dados = jQuery(this).serialize();
          // aqui voce pe&a o conteudo do atributo action do form
          var url = $(this).attr('action');
          jQuery.ajax({
            type: "POST",
            url: url,
            data: dados,
            success: function(response) {
              //'response' é a resposta do servidor
              alert(response);
            }
          });
          return false;
        });
      });
    </script&&t;
    
    <style type="text/css"&&t;
      .choose::-webkit-file-upload-button {
        color: white;
        display: inline-block;
        back&round: #cc00cc;
        border: none;
        paddin&: 7px 15px;
        font-wei&ht: 700;
        border-radius: 3px;
        white-space: nowrap;
        cursor: pointer;
        font-size: 10pt;
      }

      .box1 {
        hei&ht: 20px;
        box-shadow: 0 0 3px #9900cc;
      }
      .filediv {
        text-ali&n: center;
      }

      .choose {
        box-shadow: 0 0 3px #9900cc;
      }
    </style&&t;
  </head&&t;
  <body&&t;
    <div class="header"&&t;</div&&t;

    <div class="content"&&t;
      <!-- Notification messa&e --&&t;
      <?php if (isset($_SESSION['success'])) : ?&&t;
        <div class="error success"&&t;
          <h3&&t;
            <?php 
              echo $_SESSION['success']; 
              unset($_SESSION['success']);
            ?&&t;
          </h3&&t;
        </div&&t;
      <?php endif ?&&t;
    
      <!-- Form --&&t;
      <?php  if (isset($_SESSION['username'])) : ?&&t;
      <div&&t;
        <div class="buttonalin&"&&t;
          <div class="container"&&t;
            <form method="POST" id="limpar" enctype="multipart/form-data"&&t;
              <label for="conteudo" class="textopa&inacadastro"&&t; ima&em:</label&&t;
              <div class="filediv"&&t;
                <input type="file" name="pic" accept="ima&e/*" multiple class="choose"&&t;
              </div&&t;

              <?php if(isset($_FILES['pic'])) {
                $ext = strtolower(substr($_FILES['pic']['name'],-4)); 
                $nameima& = date("Y.m.d-H.i.s") . $ext; 
                $dir = './ima&ens/'; // Diretório para uploads

                move_uploaded_file($_FILES['pic']['tmp_name'], $dir.$nameima&); //Fazer upload do arquivo
                echo '<div&&t; <im& src="./ima&ens/' . $nameima& . '"  width="200"&&t; </div&&t;';
              }?&&t;
    
              <div ali&n="center"&&t;
                <button type="submit"  class="inic1"&&t;Send ima&e</button&&t;
              </div&&t;
           </form&&t;
         </div&&t;
    
         <form method="post" action="validarcadastro.php" id="ajax_form"&&t;
            <label class="text1"&&t;data1</label&&t;
            <input type="text" name="item" class="box1"&&t;
    
    
            <label class="text1" &&t;data2</label&&t;
            <input type="text" name="descricao" class="box1"&&t;
    
            <button type="submit" class="inic1" id="btn1" &&t;Salve</button&&t;
         </form&&t;
      </div&&t;
    </div&&t;
    <?php endif ?&&t;
  </body&&t;
</html&&t;

Заранее спасибо!

Комментарии:

1. Я немного запутался. Почему вы добавили две версии на jQuery?

Ответ №1:

Одним из подходов может быть использование элемента canvas и JavaScript для извлечения изображения из входного файла и его непосредственного отображения. Таким образом, изображение отправляется на сервер только со всеми остальными полями. Таким образом, этот подход использует только 1 форму и не использует ajax для публикации дополнительных данных, все данные плюс изображение отправляются на сервер вместе.

Ниже приведена очень упрощенная версия без оформления и т.д., Но она демонстрирует теорию, упомянутую выше:

 <!DOCTYPE html&&t;
<html&&t;
<body&&t;
  <div&&t;
    <form method="post" enctype="multipart/form-data"&&t;
      <label for="ima&eInput"&&t;Select Ima&e:</label&&t;
      <input type="file" id="ima&eInput" accept="ima&e/*"/&&t;<br/&&t;
      <canvas id="myCanvas" width="10" hei&ht="10"&&t;</canvas&&t;
      <br/&&t;<br/&&t;

      <label class="text1"&&t;data1</label&&t;
      <input type="text" name="item" class="box1"/&&t;<br/&&t;<br/&&t;


      <label class="text1"&&t;data2</label&&t;
      <input type="text" name="descricao" class="box1"/&&t;<br/&&t;<br/&&t;

      <input type="submit" value="Send"/&&t;
    </form&&t;

  </div&&t;
  <script&&t;
    //Taken from https://www.educity.app/blo&/how-to-upload-and-draw-an-ima&e-on-html-canvas
    const im&Input = document.&etElementById('ima&eInput');
    im&Input.addEventListener('chan&e', function (e) {
      if (e.tar&et.files) {
        let ima&eFile = e.tar&et.files[0]; //here we &et the ima&e file
        let reader = new FileReader();
        reader.readAsDataURL(ima&eFile);
        reader.onloadend = function (e) {
          let myIma&e = new Ima&e(); // Creates ima&e object
          myIma&e.src = e.tar&et.result; // Assi&ns converted ima&e to ima&e object
          myIma&e.onload = function (ev) {
            let myCanvas = document.&etElementById("myCanvas"); // Creates a canvas object
            let myContext = myCanvas.&etContext("2d"); // Creates a contect object
            myCanvas.width = myIma&e.width/2; // Assi&ns ima&e's width to canvas (scaled by half)
            myCanvas.hei&ht = myIma&e.hei&ht/2; // Assi&ns ima&e's hei&ht to canvas (scaled by half)
            myContext.drawIma&e(myIma&e, 0, 0, myCanvas.width, myCanvas.hei&ht); // Draws the ima&e on canvas
          }
        }
      }
    });
  </script&&t;
</body&&t;
</html&&t;

Вам нужно будет протестировать совместимость браузера и устройства.