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

How can i remove files before sending them to the server?

本文关键字：文件 服务器 删除      更新时间：2023-09-26

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

<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();});
});
在我看来

，您想在客户端完成所有操作，因此与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'
    })
})
相关文章：