Question

我正在尝试制作一个PHP个人资料编辑表单，以便用户可以将其图片上传为个人资料图片，因此我使用this

我的ajax响应包含有关上传表单信息的消息。现在我的问题是如何将图像上传路径保存到数据库。

或者我在同一页面上有另一个表单，其中有一个隐藏字段，我试图从data响应消息中获取上传图像的路径。

我尝试

  $('#message').change(function() {
      var filepath = $('div#message>div.alert>p>a.filepath').attr('href');
      $('input#profile_img').val(filepath);
   });

我在同一页面中另一种形式的隐藏字段，可以将所有信息都存储到数据库中。

<input id="profile_img" type="hidden" name="profile_img" value="">

图片上传HTML：

<form id="upload-image-form" action="" method="post" enctype="multipart/form-data">
  <div id="image-preview-div" style="display: none">
    <label for="exampleInputFile">Selected image:</label>
    <br>
    <img id="preview-img" src="noimage">
  </div>
  <div class="form-group">
    <input type="file" name="file" id="file" required>
  </div>
  <button class="btn btn-primary" id="upload-button" type="submit" disabled>Upload image</button>
</form>

<br>
<div class="alert alert-info" id="loading" style="display: none;" role="alert">
  Uploading image...
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    </div>
  </div>
</div>
<div id="message"></div>

图片上传处理器

<?php
if ( isset($_FILES["file"]["type"]) )
{
  $max_size = 500 * 1024; // 500 KB
  $destination_directory = "uploads/profile-pic/";
  $validextensions = array("jpeg", "jpg", "png");
  $temporary = explode(".", $_FILES["file"]["name"]);
  $file_extension = end($temporary);
  // We need to check for image format and size again, because client-side code can be altered
  if ( (($_FILES["file"]["type"] == "image/png") ||
        ($_FILES["file"]["type"] == "image/jpg") ||
        ($_FILES["file"]["type"] == "image/jpeg")
       ) && in_array($file_extension, $validextensions))
  {
    if ( $_FILES["file"]["size"] < ($max_size) )
    {
      if ( $_FILES["file"]["error"] > 0 )
      {
        echo "<div class=\"alert alert-danger\" role=\"alert\">Error: <strong>" . $_FILES["file"]["error"] . "</strong></div>";
      }
      else
      {
        if ( file_exists($destination_directory . $_FILES["file"]["name"]) )
        {
          echo "<div class=\"alert alert-danger\" role=\"alert\">Error: File <strong>" . $_FILES["file"]["name"] . "</strong> already exists.</div>";
        }
        else
        {
          $sourcePath = $_FILES["file"]["tmp_name"];
          $targetPath = $destination_directory . $_FILES["file"]["name"];
          move_uploaded_file($sourcePath, $targetPath);
          echo "<div class=\"alert alert-success\" role=\"alert\">";
          echo "<p>Image uploaded successful</p>";
          echo "<p>File Name: <a class='filepath' href=\"". $targetPath . "\"><strong>" . $targetPath . "</strong></a></p>";
          echo "<p>Type: <strong>" . $_FILES["file"]["type"] . "</strong></p>";
          echo "<p>Size: <strong>" . round($_FILES["file"]["size"]/1024, 2) . " kB</strong></p>";
          //echo "<p>Temp file: <strong>" . $_FILES["file"]["tmp_name"] . "</strong></p>";
          echo "</div>";
        }
      }
    }
    else
    {
      echo "<div class=\"alert alert-danger\" role=\"alert\">The size of image you are attempting to upload is " . round($_FILES["file"]["size"]/1024, 2) . " KB, maximum size allowed is " . round($max_size/1024, 2) . " KB</div>";
    }
  }
  else
  {
    echo "<div class=\"alert alert-danger\" role=\"alert\">Unvalid image format. Allowed formats: JPG, JPEG, PNG.</div>";
  }
}
?>

Answer 1

我更改了成功部分，并且成功了

success: function(data){
        $('#loading').hide();
        $('#message').html(data);
        var filepath = $('div#message>div.alert>p>a.filepath').attr('href');
        $("input#profile_img").val(filepath);
    }

我如何从我的Ajax响应中获得特定的价值

1 个答案: