如何从多个输入类型文件中删除特定文件？

Question

我正在使用多个输入类型文件来更新一些图片。上传前，页面会显示每张图片的缩影。我想为每张图片做一个删除链接，当用户点击时，图片消失并且文件从输入中删除。

我尝试在下面使用此代码：

HTML：

<input id="midiasUpload" multiple="multiple" type="file" name="midias" accept="image/x-png,image/gif,image/jpeg" /> 
<div id="midiaDigital"></div>

Javascript：

$(document).ready(function() {

$("#midiasUpload").on('change', function() {
    //Get count of selected files
    var countFiles = $(this)[0].files.length;
    var imgPath = $(this)[0].value;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    var image_holder = $("#midiaDigital");
    image_holder.empty();
    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
      if (typeof(FileReader) != "undefined") {
        //loop for each file selected for uploaded.
        for (var i = 0; i < countFiles; i++) 
        {
          var reader = new FileReader();
          reader.onload = function(e) {
              $(image_holder).append('<div class="form-group row">' +
                                      '<div>' +
                                      '<div class="col-md-6">' +                              
                                      '<img src="' + e.target.result + '" class="thumb-image img-responsive">' +
                                      '<input type="text" class="form-control input-sm" name="midiaDigitals[' + i + '].legenda" placeholder="Digite a descrição da mídia digital"/>' + 
                                      '<a href="#" class="remove_field1">Remover</a>' + //add input box
                                      '</div>' +
                                      '</div>' +
                                      '</div>'); 


          }
          image_holder.show();
          reader.readAsDataURL($(this)[0].files[i]);
        }
      } else {
        alert("O browser não suporta upload de arquivos.");
      }
    } else {
      alert("Formato de arquivo inválido");
    }
  });

$(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); 
})

}); 

使用此代码，“预览”图片与“删除”链接一起出现。当我点击“删除”时，预览图片被删除，但文件继续被选中。我该怎么办？

Answer 1

您可以简单地通过 jQuery 在一行中完成此操作：$(\'#midiasUpload\').val(\'\');。它重置输入值。这是片段：

\n\n

\r\n

\r\n

function select(el) {\r\n  img = el;\r\n}\r\nvar img;\r\nvar input;\r\n$(document).ready(function() {\r\n  $("#midiasUpload").on(\'change\', function() {\r\n    var countFiles = $(this)[0].files.length;\r\n    input = $(this)[0];\r\n    console.log(\'Input value after upload: \', input.value)\r\n    var imgPath = input.value;\r\n    img = imgPath;\r\n    var extn = imgPath.substring(imgPath.lastIndexOf(\'.\') + 1).toLowerCase();\r\n    var image_holder = $("#midiaDigital");\r\n    image_holder.empty();\r\n    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {\r\n      if (typeof(FileReader) != "undefined") {\r\n        for (var i = 0; i < countFiles; i++) {\r\n          var reader = new FileReader();\r\n          reader.onload = function(e) {\r\n            $(image_holder).append(\'<div class="form-group row">\' +\r\n                                   \'<div>\' +\r\n                                   \'<div class="col-md-6">\' +                             \r\n                                   \'<img src="\' + e.target.result + \'" class="thumb-image img-responsive" onclick="select($(this))">\' +\r\n                                   \'<input type="text" class="form-control input-sm" name="midiaDigitals[\' + i + \'].legenda" placeholder="Digite a descri\xc3\xa7\xc3\xa3o da m\xc3\xaddia digital"/>\' + \r\n                                   \'<a href="#" class="remove_field1">Remover</a>\' + //add input box\r\n                                   \'</div>\' +\r\n                                   \'</div>\' +\r\n                                   \'</div>\'); \r\n          }\r\n          image_holder.show();\r\n          reader.readAsDataURL($(this)[0].files[i]);\r\n        }\r\n      } else {\r\n        alert("O browser n\xc3\xa3o suporta upload de arquivos.");\r\n      }\r\n    } else {\r\n      alert("Formato de arquivo inv\xc3\xa1lido");\r\n    }\r\n  });\r\n\r\n  $(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text\r\n    e.preventDefault(); $(this).parent(\'div\').remove(); \r\n    img.val = \'\';\r\n    input.value = null;\r\n    console.log(\'Input value after remove: \', input.value)\r\n  });\r\n});

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<input id="midiasUpload" multiple="multiple" type="file" name="midias" accept="image/x-png,image/gif,image/jpeg" /> \r\n<div id="midiaDigital" style="margin-bottom: 100px;"></div>

\r\n

\r\n

\r\n

\n