我如何从预览中删除图像以及文件标签 Jquery答案

【问题标题】：How can i remove image from preview as well as file tag Jquery我如何从预览中删除图像以及文件标签 Jquery
【发布时间】：2020-05-06 02:43:15
【问题描述】：

我想从预览面板以及文件标记中删除特定图像，同时选择多个图像。

我将添加 HTML 部分以显示所选图像的预览。

我正在选择多张图片（2、3、4 张图片）

当用户使用“删除”选项从预览面板中删除选定的图像时，我正在尝试删除预览并且它是从文件标签中选择的。

示例： 已经选择了 2 个文件并删除了一个文件，但文件标签选择仍显示 2 个文件。

我已经完成了添加图像预览和删除预览的代码。

      <div class="form-group">
           <lable>Select Multiple Image</lable>
           <input type="file" name="image[0][]" class="form-control filesimage0" multiple onchange="selectpreview(0,event)">
      </div>
  </div>

function selectpreview(id,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"+id+"\" id=\"image_" + id + "\">Remove</span>" +
            "</span>").insertAfter("#showimage"+id);

            $(".remove"+id).click(function(e){
             $(this).parent(".pip").remove();

          });

        });
        fileReader.readAsDataURL(f);
      }
}

【问题讨论】：

到目前为止你做了什么？显示您现有的代码
resetform 和replaceimg src
你好，@DevsiOdedra 你能给我一个示例代码吗？

标签： javascript jquery html

【解决方案1】：

您可以取消链接files 数组的索引并重新排列数组。假设您有 4 个文件 [1, 2, 3, 4]，其索引为预览元素的 id 值，因此在单击 remove 按钮时，您可以将 id 与其各自的索引映射到 @ 987654325@数组并相应拼接数组。

const files = e.target.files; // 4 files
files.splice(YOUR_ID_VALUE, 1); // you want to remove 3rd file then YOUR_ID_VALUE is 2

【讨论】：