如何從輸入類型文件中刪除多個特定文件？

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('');。它重置輸入值。下面是摘錄：

function select(el) { 
 
    img = el; 
 
} 
 
var img; 
 
$(document).ready(function() { 
 

 
$("#midiasUpload").on('change', function() { 
 
    //Get count of selected files 
 
    var countFiles = $(this)[0].files.length; 
 
    var imgPath = $(this)[0].value; 
 
    img = imgPath; 
 
    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" onclick="select($(this))">' + 
 
             '<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(); 
 
    img.val(''); 
 
}) 
 

 
});

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