如何在将文件发送到服务器之前删除文件？

Question

我想发送附件中的多个文件。我可以选择多个文件作为附件，但是当我想删除任何附加文件时，我无法做到这一点，当我上传新附件时，只有新附件发送邮件而不是我第一次附加的其他文件。我如何更新和删除附件？

<div> 
    <div class="col-sm-8"> 
     <div class="fileupload fileupload-exists upload-btn" data-provides="fileupload"> 
      <input type="hidden" value="" name=""> 
      <span class="btn btn-file btn-light-grey"> 
      <i class="fa fa-folder-open-o"></i> 
      <span class="fileupload-exists">Select file(s)</span> 
      <input type="file" name="task_files[]" class="file_handler file_index myFile" data-id="1" onchange="dostuff(this);" multiple="multiple"> 
      </span> 
     </div> 
    </div> 
    <input type="hidden" name="unsetKeys" class="unsetKeys"> 
</div> 

脚本

var unset_indexes = []; 
function dostuff(input) { 
    var output = ''; 
    var validOutput = '<br />Valid Files:<br />'; 
    var validFiles = []; 
    var obj = $(input); 
    id = obj.attr('data-id'); 
    for(var i = 0; i < input.files.length; i++) { 
     var ext = (input.files[i].name).split('.').pop(); 

     validFiles.push(input.files[i]); 
     validOutput += input.files[i].name; 
     output += "<div class='row'><div class='col-sm-9 file_index_"+i+"'>"+input.files[i].name+ "</div><div class='col-sm-3'><a data-id="+id+" class='removefile btn btn-xs btn-danger' file-index='"+i+"'>X</a></div></div>"; 
    } 
    //output += validOutput; 
    $('#outputfiles').append(output); 
    //document.getElementById('output_'+id).innerHTML = output; 
} 

$(document).on('click','.removefile',function(){ 
    id = $(this).attr('data-id'); 
    var fileObj = $(".file_index_"+id); 
    console.log(fileObj); 
    unset_indexes.push({"id":id, "val":$(this).attr('file-index')}); 
    var needToRemoveIndex = fileObj[0]['files'][$(this).attr('file-index')]; 
    console.log(needToRemoveIndex); 
    console.log(unset_indexes); 
    unsetKeys = JSON.stringify(unset_indexes); 
    $('.unsetKeys').val(unsetKeys); 
    delete needToRemoveIndex; 
    $(this).parent().parent().slideUp('slow', function(){$(this).remove();}); 
}); 

Answer 1

在我看来，要做到这一切在客户端，因此无关PHP ...

因此，这里是我的解决方案

<div> 
    <div class="col-sm-8"> 
     <div class="fileupload fileupload-exists upload-btn" data-provides="fileupload"> 
      <input type="hidden" value="" name=""> 
      <span class="btn btn-file btn-light-grey"> 
      <i class="fa fa-folder-open-o"></i> 
      <span class="fileupload-exists">Select file(s)</span> 
      <input type="file" name="task_files[]" class="file_handler file_index myFile" multiple="multiple"> 
      </span> 
     </div> 
    </div> 
    <input type="hidden" name="unsetKeys" class="unsetKeys"> 
</div> 

脚本

var files 

function listFiles(evt) { 
    var $tpl = $("<div class='row'><div class='col-sm-9 name'></div><div class='col-sm-3'><a class='removefile btn btn-xs btn-danger'>X</a></div></div>") 
    var rows = [] 
    files = Array.from(this.files) // (Note: es5 support) 

    for(var i = 0; i < files.length; i++) { 
     var row = $tpl.clone() 
     var file = files[i] 

     // we bind the file instead of the index 
     // cuz it's a more reliable way of finding 
     // the file that we should remove in files[] 
     // (if files array ever get tamperd with) 
     row.find('.removefile').data('file', file) 
     row.find('.name').text(file.name) 
     rows.push(row) 
    } 

    $('#outputfiles').append(output) 
} 

$('input[type=file]').on('change', listFiles) 

$('#outputfiles').on('click', '.removefile', function(){ 
    var file = $(this).data('file') 

    var i = files.indexOf(file) 
    if(i != -1) { 
     files.splice(i, 1) 
    } 

    $(this).parent().parent().slideUp('slow', function(){$(this).remove()}) 
}) 

// We need to upload the files manualy 
// since we can not modify input.files 
$('#upload').on('click', function(){ 
    var fd = new FormData 

    for (var i = 0; i < files.length; i++) { 
     fd.append('task_files[]', files[i]) 
    } 

    $.ajax({ 
     url: 'http://example.com/script.php', 
     data: fd, 
     processData: false, 
     contentType: false, 
     type: 'POST' 
    }) 
})