带有预览和删除选项的图像上传 - Javascript / Jquery

Posted 2023-05-08

【中文标题】带有预览和删除选项的图像上传 - Javascript / Jquery

【英文标题】：Image Upload with preview and Delete option - Javascript / Jquery

【发布时间】：2016-09-09 09:09:02

【问题描述】：

下面的代码可以完美运行并上传多张图片。

这是 html 和 jQuery 代码：

<div class="field" align="left">
            <span>
                <h3>Upload your images</h3>
                <input type="file" id="files" name="files[]" multiple />
            </span>
        </div>

脚本如下：

<style>
    input[type="file"] 

     display:block;
    
    .imageThumb 
     max-height: 75px;
     border: 2px solid;
     margin: 10px 10px 0 0;
     padding: 1px;
     
    </style>
    <script type="text/javascript">
    $(document).ready(function() 

     if(window.File && window.FileList && window.FileReader) 
        $("#files").on("change",function(e) 
            var files = e.target.files ,
            filesLength = files.length ;
            for (var i = 0; i < filesLength ; i++) 
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) 
                    var file = e.target;
                    $("<img></img>",
                        class : "imageThumb",
                        src : e.target.result,
                        title : file.name
                    ).insertAfter("#files");
               );
               fileReader.readAsDataURL(f);
           
      );
      else  alert("Your browser doesn't support to File API") 
    );

    </script>

该代码添加了多个图像并显示了图像的预览。但是现在我希望当用户点击某个按钮时，比如说删除每张上传的图片，它应该被删除。不隐藏。

对此的任何帮助将不胜感激！

【问题讨论】：

我会推荐试试这个。 hayageek.com/docs/jquery-upload-file.php

试试这个 jquery 插件：blueimp.github.io/jQuery-File-Upload

【参考方案1】：

尝试添加：.click(function()$(this).remove(););。它将通过单击删除图像。

编辑包括改进版本。

编辑 2 由于人们一直在问，请参阅 this answer 手动从 FileList 中删除文件（剧透：这是不可能的......）。

$(document).ready(function() 
  if (window.File && window.FileList && window.FileReader) 
    $("#files").on("change", function(e) 
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) 
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) 
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function()
            $(this).parent(".pip").remove();
          );
          
          // Old code here
          /*$("<img></img>", 
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          ).insertAfter("#files").click(function()$(this).remove(););*/
          
        );
        fileReader.readAsDataURL(f);
      
    );
   else 
    alert("Your browser doesn't support to File API")
  
);

input[type="file"] 
  display: block;

.imageThumb 
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;

.pip 
  display: inline-block;
  margin: 10px 10px 0 0;

.remove 
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;

.remove:hover 
  background: white;
  color: black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

【讨论】：

当我提交时……它只显示一个文件……即使我上传了多个……@PinkTurtle

您使用什么服务器端语言？如果 PHP 尝试编写 var_dump($_POST["files"]) 或 var_dump($_GET["files"]) 来检查您的 var 内容。

这只会删除图片预览而不是选中的图片！

@PinkTurtle 有人可以分享预览和删除图像的完整代码，不仅仅是隐藏图像而是删除？

@Milos 你能找到这个问题的东西吗？我面临同样的问题。当我从预览中单击删除图像时，而不是从实际输入字段中。

【参考方案2】：

使用它来删除文件值和文件预览

$(".remove").click(function()
        $(this).parent(".pip").remove();
        $('#files').val("");
      );`

【讨论】：

这将删除所有文件，而不仅仅是您尝试删除的文件！

以上代码删除所有选定的文件或图像。不工作。

我们如何从输入文件中删除文件？