如何使用 PHP 预览图像答案

【问题标题】：How to preview an image using PHP如何使用 PHP 预览图像
【发布时间】：2018-07-02 17:23:57
【问题描述】：

下面给出的代码是使用 PHP 脚本在浏览器中显示图像，

<?php
$im = imagecreatefrompng("phplogo.png");
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);
?>

我希望用户从他的计算机中选择图像，然后使用 php 将其显示在浏览器中？该怎么做？

【问题讨论】：

如果你想用PHP上传图片，你需要上传图片。否则，您可以通过 javascript 显示它
表示没有办法？
有办法，但是需要先通过ajax或者php post上传图片才能显示。
你怎么帮我写代码？
你还想只使用 PHP，因为 Jquery 和 CSS 是实现它的好方法吗？

标签： php html image

【解决方案1】：

如果您不想在预览前上传，请使用 javascript/jquery 而不是 PHP。

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

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

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

$("#imgInp").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>
<style>
img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
</style>

【讨论】：

我必须在控制器中应用翻转功能，然后怎么做？
你可以通过 CSS 来实现。更新了代码。选择后只需将图像悬停，您将获得翻转
如果有帮助，你能接受答案并投票吗？

【解决方案2】：

如何通过 Jquery 预览和上传图片。

function showPreview(objFileInput) {
  if (objFileInput.files[0]) {
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
      $("#targetLayer").html('<img src="' + e.target.result + '" width="200px" height="200px" class="upload-preview" />');
      $("#targetLayer").css('opacity', '0.7');
      $(".icon-choose-image").css('opacity', '0.5');
    }
    fileReader.readAsDataURL(objFileInput.files[0]);
  }
}

$(document).ready(function(e) {
  $("#uploadForm").on('submit', (function(e) {
    e.preventDefault();
    $.ajax({
      url: "upload.php",
      type: "POST",
      data: new FormData(this),
      beforeSend: function() {
        $("#body-overlay").show();
      },
      contentType: false,
      processData: false,
      success: function(data) {
        $("#targetLayer").html(data);
        $("#targetLayer").css('opacity', '1');
        setInterval(function() {
          $("#body-overlay").hide();
        }, 500);
      },
      error: function() {}
    });
  }));
});

<div id="body-overlay">
  <div><img src="loading.gif" width="64px" height="64px" /></div>
</div>
<div class="bgColor">
  <form id="uploadForm" action="upload.php" method="post">
    <div id="targetOuter">
      <div id="targetLayer"></div>
      <img src="photo.png" class="icon-choose-image" />
      <div class="icon-choose-image">
        <input name="userImage" id="userImage" type="file" class="inputFile" onChange="showPreview(this);" />
      </div>
    </div>
    <div>
      <input type="submit" value="Upload Photo" class="btnSubmit" />
    </div>
  </form>
</div>

您可以查看demo 和download。

【讨论】：

如果有帮助，你能接受答案并投票吗？