主页 / 问题 / 1541929
Accepted
Denis
Asked:2023-09-22 03:52:02 +0000 UTC2023-09-22 03:52:02 +0000 UTC

删除图像缩略图后覆盖 input[type='file'] 中的值

  • 772

这是 HTML

   <input id="myfiles" multiple type="file">
    <div id="dropArea">
        <div class="upl_btn">
            <label for="myfiles"><label>
        </div>
    </div>

这里是上传文件时显示缩略图的JS。

  var fileInput = document.querySelector("#myfiles");
  var pullfiles=function(){      
      var files = fileInput.files;
      var fl=files.length;
      var i=0;
      var dropArea = $("#dropArea");
      var templ = "";
      var file;
      while ( i < fl) {
          file = files[i];
          fileUrl = URL.createObjectURL(file);
          if(fileUrl) {
          templ += "<div class='photo_box_wrapp'>"+
                    "<div class='photo_box'><img src='"+fileUrl+"' alt='' />"+
                    "</div><button type='button'>х</button></div>";
                }
          i++;
      }
      dropArea.prepend(templ);
      document.querySelector("#myfiles").onchange=pullfiles;
  }

删除缩略图

    $(document).on("click", ".photo_box_wrapp button", function(e) {
        e.preventDefault();
        var parent = $(this).closest(".photo_box_wrapp");
        var index = parent.attr("data-index");
        var fileInput = document.querySelector("#myfiles");
        var files = fileInput.files;
        $("#dropArea .photo_box_wrapp").each(function() {
          if($(this).attr("data-index") == index ) {
            $(this).remove();
          }
        });
        var countIndex = 0;
        $("#dropArea .photo_box_wrapp").each(function() {
          $(this).attr("data-index", countIndex);
          countIndex++;
        });
        var newFiles = [];
        for (var i = 0; i < files.length; i++) {
        if (i !== index) {
            newFiles.push(files[i]);
          }
        }
// Может я тут ошибся
        files = newFiles;
        fileInput.value = "";
        fileInput.value = fileInput.value;
        parent.remove();
      });
//--------------

单击叉号时，文件缩略图将被删除。删除缩略图后如何覆盖#myfiles 中的值？

javascript

2 个回答

  1. 您可以添加data-index缩略图，以便当您单击它时您可以了解需要删除哪个文件，并通过单击它从 DOM 和输入调用删除函数，我们将其称为“removeThumbnail”：

    var fileInput = document.querySelector("#myfiles");

var pullfiles = function() {
  var files = fileInput.files;
  var fl = files.length;
  var i = 0;
  var dropArea = $("#dropArea");
  var templ = "";
  var file;

  while (i < fl) {
    file = files[i];
    fileUrl = URL.createObjectURL(file);

    if (fileUrl) {
      templ += "<div class='photo_box_wrapp' data-index='" + i + "'>" +
        "<div class='photo_box'><img src='" + fileUrl + "' alt='' />" +
        "</div><button type='button' onclick='removeThumbnail(" + i + ")'>х</button></div>";
    }

    i++;
  }

  dropArea.prepend(templ);

  // Обработчик события изменения input
  document.querySelector("#myfiles").onchange = pullfiles;
}

// Функция для удаления миниатюры и файла из input
function removeThumbnail(index) {
  var files = fileInput.files;
  var dropArea = $("#dropArea");

  if (files.length > index) {
    const children = Array.from(dropArea[0].children);

    for (let i = 0; i < children.length; i++) {
      const child = children[i];
  
      // Находим нужную миниатюру и удаляем из DOM
      if (child.getAttribute("data-index") == index) {
        dropArea[0].removeChild(child);
        break;
      }
    }


    // Удаление файла из input
    var newFiles = [];
    for (var i = 0; i < files.length; i++) {
      // Добавляем все файлы кроме удаленного
      if (i !== index) {
        newFiles.push(files[i]);
      }
    }
    fileInput.files = newFiles;

    // Перезапись значения #myfiles
    fileInput.value = "";
    fileInput.value = fileInput.value;
  }
}

    我还想写一些关于生成缩略图的内容templ；您可以使用插值来代替通常的字符串连接，这将使您的代码更具可读性：

    // ...
if (fileUrl) {
  templ += `
    <div class='photo_box_wrapp' data-index='${i}'>
      <div class='photo_box'><img src='${fileUrl}' alt='' /></div>
      <button type='button' onclick='removeThumbnail(${i})'>х</button>
    </div>
  `;
}
// ...
    • 0
  2. Best Answer
      $(document).on("click", ".photo_box_wrapp button", function(e) {
      e.preventDefault();
      var parent = $(this).closest(".photo_box_wrapp");
      var maxSize = $("#dropArea").attr("data-maxlength");
      var index = parseInt(parent.attr("data-index"));
      if( $("#dropArea").find(".photo_box_wrapp").length < 1 ) {
        $("#dropArea").removeClass("active");
        $("#dropAreaWrapp").removeClass("active");
      }
      var fileInput = document.querySelector("#myfiles");
      $("#dropArea .photo_box_wrapp").each(function() {
        if($(this).attr("data-index") == index ) {
          $(this).remove();
        }
      });
      var countIndex = 0;
      $("#dropArea .photo_box_wrapp").each(function() {
        $(this).attr("data-index", countIndex);
        countIndex++;
      });
      for (var i = 0; i < fileInput.files.length; i++) {
        if (i == index) {
          delete fileInput.files[i];
        }
      }
      const dt = new DataTransfer()
      const input = document.getElementById('myfiles')
      const { files } = input      
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (index !== i)
          dt.items.add(file);
      }  
      input.files = dt.files;
      parent.remove();
  });

    这就是它的工作原理。

    • 0

相关问题