我有一个包含以下文件上传控件和图像控件的表单:
<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
数组数据?
最佳答案
不久前我在构建应用程序时遇到了这个问题,最好是在选择文件时从所选图像创建对象 URL,然后可以设置 img src
到该 OBJECT URL 数据,这会将其呈现到页面,例如,假设您有一个 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 表示形式,然后您可以提交表单来上传图像或选择其他图像来更新预览,希望这会有所帮助:)
关于javascript - 如何在PHP中提交表单后在新页面上显示使用HTML文件控件上传的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25748245/