使用 PHP 从数据库中上传、预览、删除图像和文档答案

【问题标题】：Upload,Preview,Delete images and documents from database using PHP使用 PHP 从数据库中上传、预览、删除图像和文档
【发布时间】：2016-05-07 05:57:52
【问题描述】：

大家好，我尝试使用以下代码上传预览和删除图像。以下是我的上传和删除代码。

Javascript 代码

<script>
var blank="";
      function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {

            $('#img_prev')
            .attr('src', e.target.result)
            .height(100).width(100);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(100).width(100);
    }
    $("#x").show().css("margin-right","10px");
}
$("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
    $("#photo1").val("");
  });
</script>

HTML 代码

<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1"/></div>
<span id="previewPane1">
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span>

下面是我得到的输出是

按 X 后，它被替换为空文件名。但我想要做的是在从数据库中检索时，我只能显示图像，我不能显示删除按钮，而且我的文件名也被设置，而不是没有选择文件。

我试图检索的代码是

<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1" ACCEPT="image/*"/></div>
 <div class="col-md-4"><span id="previewPane">
  <?php if($photo==''){?>
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span><?php } ?>
<span id="previewPane">
<?php if($photo!=''){?>
<img id="img_prev" src="<?php echo $photo;?>" alt="Upload your image"  width="100" height="100"/>
<span id="x">[X]</span>
<?php
 } ?>
</span>

$photo 是具有从数据库中检索的图像名称的变量。但是当我尝试这个时我得到的是

虽然从数据库中检索我可以显示图像，但 X 按钮丢失并且输入文件未设置为默认文件名没有显示选择的文件。我在这里错过了什么。谁能帮我摆脱这个问题。

我的 CSS 代码是：

#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }

【问题讨论】：

使用if(empty($photo)){ //if link not exist }else{ //if link exist }
我试过的和你的代码都是一样的。现在关闭按钮也没有显示。只显示图像
您是否尝试过使用检查工具？有时由于 css，它们可能会重叠。
No.我应该如何使用它
右键单击并选择检查元素。然后选择你的元素。在那里您将看到生成的 html 和为其应用的 css 样式。

标签： php css image

【解决方案1】：

文件输入的价值

由于安全原因，无法设置文件输入。

<!-- If you can, Anyone can stole your files  -->
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

不显示删除图标
由于您添加了属性 display:none; ，因此您的显示图标未显示，该属性隐藏了页面上的元素。您可以寻找更多显示选项here。

【讨论】：