stackoom
  简体   繁体   中英

How to get Image value from JavaScript submit to mysql table with php

 原文  2018-04-23 08:59:15  3   1    javascript/ php/ html/ css

Question

I got a code sample in javascript for user profile picture update, I'm new to javascript and don't know my way around it. Please i need your suggestions on how i can get the image value from javascript to save it to a folder and path to mysql table using php. Please any help or attempt will highly be appreciated.

This are my sample code.. 

<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>

1 answers

solution1
 0  2018-04-23 09:17:09

For updating the image there is compulsary need to do with javascript you can simply send a POST/UPDATE request in ajax call to a php code and in php fetch the image based of the reference data , update the information , put it on the mysql table. Now to store and update the image in php First a better way to store a image in db is just store the image name in the db and move the image to your project in correct image folder and then while retrieving the image html do something like this <img src="image/<?php echo $image_name ?>" /> To display the image To update it simply change the image name and move the new image to the image folder Also the form should have the arrtibute enctype ="multipart/form-data" This is required to upload a file

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to keep php $_GET value from a submit button after form submit from javascript? POST submit to mysql using php the value from append javascript Get avarage value from a Table with PHP and MySQL Get value from dynamic table mysql php Selection based on value from PHP MySQL table with JavaScript value How to get the result from submit.php with Javascript? How to get value from table appended in javascript how to get value from javascript to php How to get value from a PHP array in JavaScript? How to get value from php inside a javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM