javascript - 如何从 JavaScript 获取图像值并使用 php 提交到 mysql 表-6ren

javascript - 如何从 JavaScript 获取图像值并使用 php 提交到 mysql 表

转载作者：行者123 更新时间：2023-11-28 01:50:21

我有一个用于用户个人资料图片更新的 javascript 代码示例，我是 javascript 的新手，不知道如何解决它。我需要你的建议，关于如何从 javascript 获取图像值以将其保存到文件夹和使用 php 的 mysql 表路径。请提供任何帮助或尝试，我们将不胜感激。

这是我的示例代码..

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">


$(document).ready(function (){ 
var PictureUpdate = /** @class */ (function () {
    function PictureUpdate() {
        this.profile = $('.profile-pic'); //direct parent
        this.cover = $('.cover'); //direct parent
        this.updateProfile();
        this.updateCover();
    }
    PictureUpdate.prototype.updateProfile = function () {
        var _this = this;
        var input = $('input', this.profile);
        input.change(function (e) {
            var img = URL.createObjectURL(e.target.files[0]);
            _this.fireAJAX(null, img, _this.profile);
        });
    };
    PictureUpdate.prototype.updateCover = function () {
        var _this = this;
        var input = $('input', this.cover);
        input.change(function (e) {
            var img = URL.createObjectURL(e.target.files[0]);
            _this.fireAJAX(null, img, _this.cover);
        });
    };
    PictureUpdate.prototype.fireAJAX = function (url, data, element) {
        var _this = this;
        $.ajax({
            type: "POST",
            data: data,
            beforeSend: function () {
                _this.startLoader(element);
            },
            success: function () {
                setTimeout(function () {
                    _this.destroyLoader(element);
                    $('> img', element).attr("src", data);
                }, 2000);
            }
        });
    };
    PictureUpdate.prototype.startLoader = function (element) {
        var loader = $('.layer', element);
        loader.addClass("visible");
    };
    PictureUpdate.prototype.destroyLoader = function (element) {
        var loader = $('.layer', element);
        loader.removeClass("visible");
    };
    return PictureUpdate;
}());
new PictureUpdate();
});
</script>

</head>

<style type="text/css">

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%);
            transform: rotate(0deg) translate(-50%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%);
            transform: rotate(360deg) translate(-50%);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%);
            transform: rotate(0deg) translate(-50%);
  }
  100% {
    -webkit-transform: rotate(360deg) translate(-50%);
            transform: rotate(360deg) translate(-50%);
  }
}
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  -webkit-animation: spin 0.35s infinite linear;
          animation: spin 0.35s infinite linear;
  border: 2px solid #707070;
  border-radius: 50%;
  border-top-color: white;
  height: 25px;
  -webkit-transform-origin: left;
          transform-origin: left;
  top: 45%;
  width: 25px;
}
.hidden-input {
  left: -999px;
  position: absolute;
}
.profile {
  *zoom: 1;
  background-color: white;
  border-radius: 2px;
  display: block;
  float: none;
  margin: 5px auto;
  overflow: hidden;
  padding-bottom: 20px;
  width: 400px;
}
.profile:before,
.profile:after {
  content: "";
  display: table;
}
.profile:after {
  clear: both;
}
.about {
  font-family: Helvetica, "Helvetica Neue", "Tahoma";
  font-size: 12px;
  color: #adadad;
  line-height: 17px;
}
.image-wrapper {
  background: rgba(0, 0, 0, 0.2);
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  transition: bottom 0.15s linear;
  width: 100%;
}
.edit {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: white;
  cursor: pointer;
  font-size: 22px;
  top: 10px;
}
.cover {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.cover img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 300px;
}
.cover .image-wrapper {
  bottom: auto;
  height: 45px;
  left: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
}
.name {
  font-family: Helvetica, "Helvetica Neue", "Tahoma";
  font-size: 18px;
}
.profile-pic {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50%;
  border: 4px solid white;
  height: 210px;
  overflow: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 210px;
  top: 0;
}
.profile-pic img {
  box-sizing: border-box;
  height: 100%;
  left: 50%;
  max-height: 100%;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s ease-out;
  width: auto;
}
.profile-pic:hover .image-wrapper {
  bottom: 0;
}
.username {
  margin-top: 122px;
  text-align: center;
}
.user-info {
  *zoom: 1;
  padding: 8px;
  position: relative;
}
.user-info:before,
.user-info:after {
  content: "";
  display: table;
}
.user-info:after {
  clear: both;
}
body {
  background-color: #202020;
}
.container {
  margin: 40px auto 50px;
  max-width: 960px;
}
.layer {
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.layer.visible {
  display: block;
}
    </style>


<body>
    <div class="container">
  <div class="profile large">
    <div class="cover"><img src="https://source.unsplash.com/random/700x300"/>
      <div class="layer">
        <div class="loader"></div>
      </div><a class="image-wrapper" href="#">
        <form id="coverForm" action="#">
          <input class="hidden-input" id="changeCover" type="file"/>
          <label class="edit glyphicon glyphicon-pencil" for="changeCover" title="Change cover"></label>
        </form></a>
    </div>
    <div class="user-info">
      <div class="profile-pic"><img src="https://source.unsplash.com/random/300x300"/>
        <div class="layer">
          <div class="loader"></div>
        </div><a class="image-wrapper" href="#">
          <form id="profilePictureForm" action="#">
            <input class="hidden-input" id="changePicture" type="file"/>
            <label class="edit glyphicon glyphicon-pencil" for="changePicture" type="file" title="Change picture"></label>
          </form></a>
      </div>
      <div class="username">
        <div class="name"><span class="verified"></span>@John Doe</div>
        <div class="about">Frontend developer and coffee lover</div>
      </div>
    </div>
  </div>
</div>


</body>

</html>

最佳答案

为了更新图像，必须使用 javascript，您可以简单地在 ajax 调用中向 php 代码发送 POST/UPDATE 请求，然后在 php 中根据引用数据获取图像，更新信息，将其放在mysql 表。现在在 php 中存储和更新图像首先，在数据库中存储图像的更好方法是将图像名称存储在数据库中，然后将图像移动到元素中正确的图像文件夹中，然后在检索图像 html 时执行类似这样的操作 <img src="image/<?php echo $image_name ?>" />显示图像要更新它，只需更改图像名称并将新图像移动到图像文件夹表格也应该有 arrtibute enctype ="multipart/form-data"这是上传文件所必需的

关于javascript - 如何从 JavaScript 获取图像值并使用 php 提交到 mysql 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49977053/