Как просмотреть изображение с помощью PHP

Question

Приведенный ниже код отображает изображение в браузере с использованием PHP-скрипта,

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

Я хочу, чтобы пользователь выбрал изображение со своего компьютера и затем оно отображалось в браузере с помощью php? Как это сделать?

Answer 1

Как просмотреть и загрузить изображение с помощью 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>

Вы можете проверить демоверсию и .

Answer 2

Сделайте это с помощью 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>