时间戳

首页 > 解决方案 > 如何显示所选图像及其名称？

javascript - 如何显示所选图像及其名称？

问题描述

我正在学习并简单地制作一个用户注册表单，其中有几个字段，用户必须上传其个人资料图片。我使用 php 在提交之前验证数据。

点击提交按钮后，它会验证数据并刷新页面，因此填充的数据已经消失。所以我们使用前。value="<?php echo $name; ?>"在输入值中以保存用户插入的数据。可以使用简单的输入类型，例如文本等，但是我们如何保存图像的数据并将其显示在图像容器中，并在输入类型文件中显示所选图像的名称。

<!DOCTYPE html>
<!-- form -->
<?php
  $nameError = $genderError = $emailError = $mobileError = $imageError = "";
  $name = $gender = $email = $mobile = $image = "";

  $imagePath = $_FILES['image']['name'];

  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["name"])) {
      $nameError = "Please provide Name";
    } else {
      $name = validateInput($_POST["name"]);
    }

    if (empty($_POST["gender"])) {
      $genderError = "Please select Gender";
    } else {
      $gender = validateInput($_POST["gender"]);
    }

    if (empty($_POST["email"])) {
      $emailError = "Please provide Email ID";
    } else {
      $email = validateInput($_POST["email"]);
    }

    if (empty($_POST["mobile"])) {
      $mobileError = "Please provide Mobile Number";
    } else {
      $mobile = validateInput($_POST["mobile"]);
    }

    if (empty($_POST["image"])) {
      $imageError = "Please provide Image";
    } else {
      $image = validateInput($_POST["image"]);
    }
  }

  function validateInput($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }
?>

<html lang="en" dir="ltr">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/master.css">
  <!-- style -->
  <style media="screen">
    .center {
      text-align: center;
    }

    .required {
      color: #ff0000;
    }

    form {
      margin-bottom: 50px;
    }
  </style>
</head>
<body>
  <div class="center container-fluid" style="margin: 50px;">
    <h1 class="display-1">User Registration</h1>
  </div>
  <div class="container">
    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" enctype="multipart/form-data">
      <!-- name -->
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Name</span>
          </div>
          <input type="text" class="form-control" name="name" value="<?php echo $name; ?>">
        </div>
        <span class="required"><?php echo $nameError; ?></span>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Gender</span>
          </div>
          <select class="form-control" name="gender">
            <option <?php if (isset($gender) && $gender == "") echo "selected" ?> value="">Select your gender</option>
            <option <?php if (isset($gender) && $gender == "1") echo "selected" ?> value="1">Male</option>
            <option <?php if (isset($gender) && $gender == "0") echo "selected" ?> value="0">Female</option>
          </select>
        </div>
        <span class="required"><?php echo $genderError; ?></span>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Email</span>
          </div>
          <input class="form-control" type="email" name="email" value="<?php echo $email; ?>">
        </div>
        <span class="required"><?php echo $emailError; ?></span>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Mobile</span>
          </div>
          <input class="form-control" minlength="10" maxlength="10" type="tel" name="mobile" value="<?php echo $mobile; ?>">
        </div>
        <span class="required"><?php echo $mobileError; ?></span>
      </div>
      <!-- image container -->
      <div class="form-group" id="image_container" style="display: none;">
        <img src="#" id="selected_image" width="300" height="175">
      </div>
      <?php echo $imagePath; ?>
      <?php
        if (isset($imagePath) && $imagePath != "") {
          echo
          "<script type='text/javascript'>
            document.getElementById('image_container').style.display = 'block';
            document.getElementById('selected_image').src = '" . $imagePath ."';
          </script>";
        }
      ?>
      <!-- image -->
      <div class="form-group">
        <input class="form-control" type="file" name="image" onchange="readURL(this)">
        <span class="required"><?php echo $imageError; ?></span>
      </div>
      <!-- submit -->
      <center>
        <input type="submit" class="btn btn-info">
      <center>
    </form>
  </div>
</body>

<script type="text/javascript">
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        $('#selected_image').attr('src', e.target.result);
      }

      reader.readAsDataURL(input.files[0]);

      document.getElementById("image_container").style.display = "block";
    }
  }
</script>
</html>

请看一下并提供帮助并建议我。

标签： javascriptphpjqueryhtml

解决方案

推荐阅读