Блог

Главная - Вопросы по программированию - Как получить изображение, хранящееся в папке и SQL, используя PHP?

Как получить изображение, хранящееся в папке и SQL, используя PHP?

#php #html

#php #HTML

Вопрос:

Я пытаюсь обновить изображение, сохраненное в каталоге. Я также сохранил имя файла в MySQL. Сохранение изображений выполняется с использованием move_uploaded_file() . Но, похоже, нет способа получить имя файла из базы <input type="file"> данных. Итак, как вы думаете, какой лучший способ сообщить моим пользователям, что они редактируют изображение, поскольку я не могу передать значение в input:file тег. Как я могу показать пользователям изображение, которое они пытаются редактировать.

список продуктов с кнопкой редактирования

редактировать страницу продукта

[database3

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

1. it seems that there is no way to fetch the filename from database into <input type="file"> …. нет, это не так. Но зачем вам это нужно? <input type="file"> предназначен для ввода файлов. Если вы хотите отобразить файл на веб-странице, используйте <img> .

2. Onc это имя файла и путь хранятся в базе данных, которую вы не будете использовать input type='file' для редактирования чего-либо, только для замены изображения другим изображением, и в этом случае, когда выбрано новое изображение и отправлена форма, вы уже знаете идентификатор записи, в которой изначально хранилось изображение, поэтому обновите эту запись.

3. @ProfessorAbronsius итак, вы думаете, мне следует оставить страницу редактирования продукта как есть, не отображая изображение, которое они редактируют? и просто заменить старый загруженный файл на новый?

4. Если вы на самом деле не разрешаете пользователю редактировать изображение (как в Photoshop или аналогичном), то вы на самом деле не редактируете изображение. Вы можете легко отобразить изображение, и это может быть полезно, если, например, пользователь хочет добавить описание изображения…

5. Вы можете использовать некоторые хитрые CSS-позиции элементов и javascript, чтобы создать иллюзию, что file на странице редактирования повторно загружен исходный файл.

Ответ №1:

Я бы загрузил изображение на компьютеры пользователей, затем отредактировал, а затем повторно загрузил, заменив существующее изображение.

Ответ №2:

Согласно комментарию — вы могли бы использовать небольшую хитрость, чтобы создать иллюзию, что file input имя изображения уже загружено с использованием css и javascript. Следующий пример очень быстро собран (протестирован только в Chrome) и примерно соответствует впечатлению, что имя файла предварительно выбрано (кроме текста красным цветом, чтобы выделить вещи здесь)

 <?php
    $filename='default.jpg'; // this would be from database select query...
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            #product{
                width:200px;
                height:2rem;
                display:inline-block;
                position:absolute;
                left:6rem;
                background:white;
                color:red;
                font-weight:bold;
                z-index:2;
                cursor:pointer;
            }
            input[type='file']{
                height:2rem;
                float:left;
                clear:none;
                z-index:1;
            }
        </style>

    </head>
    <body>
        <form method='post'>
            <div id='container'>
                <span id='product'><?=$filename;?></span>
                <input type='file' name='product' />
            </div>
        </form>
        <script>
            let oInput=document.querySelector('input[type="file"][name="product"]');
            let oSpan=document.getElementById('product');
            
            oSpan.addEventListener('click',e=>{e.target.parentNode.removeChild(e.target);
                oInput.click();
            });
            
            oInput.addEventListener('change',e=>{
                oSpan.parentNode.removeChild(oSpan);
            })
        </script>
    </body>
</html>
 
 let oInput=document.querySelector('input[type="file"][name="product"]');
let oSpan=document.getElementById('product');

if( oSpan ){
    oSpan.addEventListener('click',e=>{e.target.parentNode.removeChild(e.target);
      oInput.click();
    });
}

oInput.addEventListener('change',e=>{
  if( oSpan )oSpan.parentNode.removeChild(oSpan);
}) 
 #product{
  width:200px;
  height:2rem;
  display:inline-block;
  position:absolute;
  left:5.75rem;
  background:white;
  color:red;
  font-weight:bold;
  z-index:2;
  cursor:pointer;
}
input[type='file']{
  height:2rem;
  float:left;
  clear:none;
  z-index:1;
} 
 <form method='post'>
  <div id='container'>
    <span id='product'>default.jpg</span>
    <input type='file' name='product' />
  </div>
</form>