Question

我正在尝试隐藏图像框，直到在我的文件上传代码中设置了文件。现在它显示$preview图像框，无论文件是否已设置。

我做错了什么？

<form action="" method="POST" enctype="multipart/form-data">
    Change your profile picture <br><input type="file" name="file" class="inputbarfile" onchange="readURL(this);">
    <?php
    $preview_file = '<input type="file" name="file" class="inputbarfile" onchange="readURL(this);">';
    $preview =  '<img width="300px" height="200px" id="file" src="#" alt="your image">';
    if (empty($preview_file)) {
        '';
    } else {
        echo $preview;
    } ?>
    <input type="submit" name="create" value="Upload">
</form>

Answer 1

不需要PHP条件就可以使用jquery实现这一点。

<强> HTML

<form action="" method="POST" enctype="multipart/form-data">
    Change your profile picture <br>
    <input type="file" name="file" class="inputbarfile">
    <img width="300px" height="200px" id="file" src="#" alt="your image" style="display: none;">
    <input type="submit" name="create" value="Upload">
</form>

在img代码集style="display:none"和文件输入的onchange事件中，图片代码显示如下。

从文件上传元素中删除onchange，而不是使用jquery change事件，如下所示。您的readURL功能将保持原样。

$(".inputbarfile").change(function(){
  $("#file").show();
  readURL(this);
});

Answer 2

如果您只想使用PHP，您的代码应如下所示（$ _POST htmlstrips，escapes的安全性除外）：

<?php if (isset($_POST['file'])):?>
    <?php $file = $_POST['file']; //#SECURE You should escape here ?>
    File:  <?php echo $file; ?>
    Image: <img width="300px" height="200px" id="file" src="path/to/image/<?php echo $file ?>" alt="your image" />
<?php endif; ?>

<form action="#" method="POST" enctype="multipart/form-data">
    Change your profile picture <br>
    <input type="file" name="file" class="inputbarfile" onchange="readURL(this);" />
    <input type="submit" name="create" value="Upload" />
</form>

if（isset）隐藏元素直到它被设置

2 个答案: