Как показать изображение, загруженное с помощью HTML-файла управления на новой странице после отправки формы в PHP?

У меня есть форма, которая содержит следующие элементы управления загрузкой файлов и изображений:

<form action="rebate_preview.php" role="form" method="post" enctype="multipart/form-data">
  <input type="hidden" name="hidden_path" id="hidden_path" value="">
  <input type="file" name="rebate_image" id="rebate_image">
  <img id="rebate_old_image" src="#" alt="your image" width="80" height="80"/>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Здесь я даю пользователю возможность просмотреть предварительный просмотр изображения, которое он выбрал для загрузки, без фактической загрузки изображения на сервер, используя следующий код jQuery:

$(document).ready(function() {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#rebate_old_image').attr('src', e.target.result);
        $('#hidden_path').val(e.target.result)
      }            
      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#rebate_image").change(function(){
    readURL(this);
  });
});

Теперь проблемы, с которыми я сталкиваюсь, состоят в том, что я не могу показать такой же предварительный просмотр изображения на следующей странице, то есть в файле "rebate_preview.php" после отправки формы с использованием элемента управления изображения. Следующая проблема, с которой я сталкиваюсь - как хранить значения из массива $_FILES на странице rebate_preview.php?

Помните, что изображение, загруженное пользователем, еще не загружено на сервер.

Страница rebate_preview.php - это просто страница предварительного просмотра с некоторыми другими полями для предварительного просмотра деталей.

Как мне показать это изображение на странице rebate_preview.php с помощью элемента управления изображением и как мне сохранить $_FILES массив данных?

Источник

2 ответа

Решение

У меня была эта проблема некоторое время назад, когда я создавал приложение, лучше всего создать URL-адрес ОБЪЕКТА из выбранного изображения, когда вы выбираете файл, затем вы можете установить свой img src к этим данным URL объекта, который будет отображать их на странице, например, скажем, у вас есть файл ввода с идентификатором image_file, Вы могли бы сделать это:

// Preview the image on the page
$('#image_file').change(function(e) {

    var selected_file = $('#image_file').get(0).files[0];
    selected_file = window.URL.createObjectURL(selected_file);
    $('#preview_image').attr('src' , selected_file);

});

Теперь источником является BLOB-представление изображения, затем вы можете отправить свою форму для загрузки изображения или выбрать другое изображение для обновления предварительного просмотра, надеюсь, это поможет:)

Источник

Простое решение?

в скрипте PHP просто сделайте:

print "<img src='".$_POST['hidden_path']."'>";
Источник
Другие вопросы по тегам