複数の入力ファイルから特定のファイルを削除する方法は？

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>