如何在PHP中提交表单后，在新页面上显示使用HTML文件控件上传的图像

How to show the image uploaded using HTML file control on a new page after form submission in PHP?

本文关键字：HTML 文件 控件 图像 显示 新页面 PHP 提交 表单      更新时间：2023-09-26

我有一个表单，其中包含以下文件上传控制和图像控制：

<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_review.php页上？

请记住，用户上传的图像尚未上传到服务器。

页面rebate_review.php只是一个预览页面，其中包含一些其他用于预览详细信息的字段。

我应该如何使用图像控件在页面rebate_review.php上显示此图像，以及我应该如何存储$_FILES数组数据？

我在构建应用程序时遇到了这个问题，最好的方法是在选择文件时从所选图像创建一个OBJECT URL，然后可以将img src设置为OBJECTURL数据，该数据将呈现到页面上，例如，假设您有一个id为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']."'>";
相关文章：