php - 使用 PHP 从数据库上传、预览、删除图像和文档

Question

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

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; }

Answer 1

文件输入值

Due to security reasons it is not possible to setup the values for the file input.

<!-- 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; whch 隐藏了页面上的元素。您可以寻找更多显示选项 here .