如何在服务器端上传图片后加载图片并将url保存在mysql数据库中答案

【问题标题】：How to load images after upload them on server side and save url in mysql database如何在服务器端上传图片后加载图片并将url保存在mysql数据库中
【发布时间】：2021-10-12 20:43:23
【问题描述】：

我构建此代码以从我的网页上传文件。范围是将图像移动到服务器端并将其名称保存在 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 作为语言。

【问题讨论】：

“不能”到底是什么意思？显示您尝试过的代码，并解释出现了什么问题。

标签： javascript php html file-upload

【解决方案1】：

离你的代码有点远，让我们看一下整体情况。这些是您必须执行的步骤：

在客户端（浏览器）上传文件
向服务器（您的 API/第三方服务）发送 POST 请求
将文件存储在磁盘上（例如Amazon S3）并将对它的引用存储在您的数据库中（例如path/to/image-somehash.jpg）。通过使用 UUID 或其他某种哈希来确保此引用是唯一的。
在客户端（浏览器）上请求图片
在您的数据库中查找参考文献
将图片路径返回给客户端
将图像渲染为<img src={path} />

移动部件太多，无法根据您的代码示例回答您的问题，但也许您可以自己解决每个步骤

【讨论】：