Как загрузить изображения после их загрузки на сервер и сохранить URL-адрес в базе данных mysql

avatar
bircastri
9 августа 2021 в 05:33
220
1
1

Я создаю этот код для загрузки файла с моей веб-страницы. Цель состоит в том, чтобы переместить изображение на серверную сторону и сохранить его имя в базе данных mysql. С помощью следующего кода я могу переместить на сервер загруженные изображения и сохранить в базе данных mysql необходимую мне информацию. Теперь проблема в следующем: когда я снова открываю веб-страницу, я должен отображать также ранее загруженные изображения, но я не могу этого сделать.

<script>
    $(document).ready(function() {
        if (window.File && window.FileList && window.FileReader) {
            $("#randomImages").on("change", function(e) {
                //alert("onchange");
                var files = e.target.files,
                filesLength = files.length;
                //alert(files);
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<span class=\"pip\">" +
                            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<br/><span class=\"remove\">Rimuovi</span>" +
                            "</span>").insertAfter("#randomImages");
                            $(".remove").click(function(){
                            $(this).parent(".pip").remove();
                        });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
                    });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Il browser corrente non supporta il caricamento immagini")
    }
    });
</script>
<style>
        input[type="file"] {
          display: block;
        }
        .imageThumb {
          max-height: 75px;
          border: 2px solid;
          padding: 1px;
          cursor: pointer;
        }
        .pip {
          display: inline-block;
          margin: 10px 10px 0 0;
        }
        .remove {
          display: block;
          background: #444;
          border: 1px solid black;
          color: white;
          text-align: center;
          cursor: pointer;
        }
        .remove:hover {
          background: white;
          color: black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="field" align="left">
          <h3>Carica le immagini</h3>
          <input type="file" id="randomImages" name="randomImages[]" multiple />
        </div>

Я использую php в качестве языка.

Источник
ADyson
9 августа 2021 в 06:54
0

Что именно означает "не в состоянии"? Покажите код, который вы пробовали для этого, и объясните, что пошло не так.

Ответы (1)

avatar
marcobiedermann
9 августа 2021 в 07:02
3

Немножко отойдя от вашего кода, давайте взглянем на общую картину. Вот шаги, которые вы должны выполнить:

  1. Загрузить файл на клиенте (браузер)
  2. Отправить запрос POST на сервер (ваш API/сторонний сервис)
  3. Сохраните файл на диске (например, Amazon S3) и сохраните ссылку на него в базе данных (например, path/to/image-somehash.jpg). Убедитесь, что эта ссылка уникальна, используя UUID или другой хеш.
  4. Запрос изображения на клиенте (Браузер)
  5. Поиск ссылки в вашей базе данных
  6. Верните путь к образу вашему клиенту
  7. Визуализировать изображение как <img src={path} />

Существует так много движущихся частей, что невозможно ответить на ваш вопрос, основываясь на вашем примере кода, но, возможно, вы могли бы решать каждый шаг самостоятельно