2016-10-19 11 views
-1

我试图隐藏图像框,直到文件被设置在我的文件上传代码中。现在它显示$preview图像框,无论是否已设置文件。if(isset)隐藏一个元素直到它被设置为

我在做什么错?

<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> 
+2

好,'$ preview_file'显然会永远是空的,因为你明确地将一个字符串分配给它只有两行。 – arkascha

+2

我认为你对什么运行在哪里感到困惑。这是不可能直接使用PHP的。 PHP在服务器上运行,而不是在客户端上运行。当你看到这个页面时,PHP已经完成了(给予或带走)。动态页面间交互需要JS完成(需要时使用AJAX)。 –

+0

它会这样做,你正在设置'$ preview_file',然后它下面的2行检查是否为空,它不会是。 – Blinkydamo

回答

0

不需要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); 
}); 
+0

但他想用php –

+1

谢谢!这很好。 – Paul

+0

@downvoter为什么你投下了票?甚至,答案似乎也很有帮助。请在投票前进行思考。 –

1

如果你想用PHP做的只是,你的代码应该如下(除安全$ _ POST htmlstrips,逃逸):

<?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>