如何在 Javascript/Jquery 中删除选定的文件答案

【问题标题】：How To Remove selected file in Javascript/Jquery如何在 Javascript/Jquery 中删除选定的文件
【发布时间】：2016-05-12 10:08:49
【问题描述】：

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

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

我尝试过使用 ($('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("");



    });

提前谢谢..

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

根据this 的问题，您不能更改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>

【讨论】：