如何在Javascript/Jquery中删除所选文件

How To Remove selected file in Javascript/Jquery

本文关键字：删除 文件 Jquery Javascript      更新时间：2023-09-26

我有一个表单，允许用户上传多个图像。如果用户不想上传特定的图像，他们可以选择逐个删除图像。

现在，如何从他们删除的文件类型中删除值（例如，不想上传）？

我尝试过使用（$（'input'）.val（"），但它只适用于单个图像，不适用于多个图像。如果我将其用于多个图像，那么所有上传的图像值都将变为空，而不是用户想要删除的特定图像。。以下是我的代码：-

HTML

<input type="file" id="files2" name="cert_img" multiple>
<output id="list2"></output>

Javascript

    var count2=0;
    function handleFileSelect2(evt) {
    var $fileUpload = $("input#files2[type='file']");
    count2=count2+parseInt($fileUpload.get(0).files.length);
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
    continue;
    }
    var reader = new FileReader();
    reader.onload = (function (theFile) {
    return function (e) {
    var span = document.createElement('span');
    span.innerHTML = ['<img class="thumb" id="image_X" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
    document.getElementById('list2').insertBefore(span, null);
                };
            })(f);
    reader.readAsDataURL(f);
        }
    }
    $('#files2').change(function(evt){
    handleFileSelect2(evt);
    });  
    $('#list2').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
        //$('input').val("");

    });

提前谢谢。。

根据这个问题，您不能更改FileList的内容，因为它是只读的。

但是，如果您想删除FileList的文件，您可以创建一个新对象，并为其设置要上载的文件。然后使用创建的对象上传文件。运行我的示例并选择多个文件。然后单击要删除的任何文件。删除文件后，请参阅浏览器控制台。

var files;
$("#files").on("change", function(e){
   files = $("#files")[0].files;
   $.each(files, function(index, value){
       $("ol").append("<li data-index='"+index+"'>"+ value.name +"</li>");
   }); 
});
$(document).on("click", "li", function(){
   var newFiles = {};
   var index = $(this).index();
   
   $("li:nth-child(" + (index + 1) + ")").remove(); 
  
   $("li").each(function(index, element){    
       var dataIndex = $(element).attr("data-index");
       newFiles[index] = files[dataIndex];
   }); 
   console.log(newFiles);
});
li:hover {
    color: red;
    cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="files" multiple>
<ol></ol>

相关文章：