Javascript 如何删除FormData对象

基本上，我要做的是通过Ajax调用提交一个拖放formdata对象。但是，如果拖放文件，请按submit。然后拖放另一个文件，旧的formdata对象仍然存在并试图传递。我在控制台中得到一个错误（现在是403错误，因为我删除了CSRF令牌，我知道这是因为我删除了formdata中的所有内容，因为我不想将额外的内容传递到后端，我宁愿传递一个空的formdata。因此我不确定为什么在我按submit之后会存在旧的表单数据。但是每次我在更多表单数据上拖动一个新文件时，都会积累更多的表单数据。）当然，我会遇到更多的错误。所以我的问题是，一旦formdata提交，我该如何处理它，并在文件拖放时创建一个新的formdata。我也不希望传递多个文件，这在目前也是可能的（我想我会处理我遇到的相同问题）

如果需要任何额外的帮助，请告诉我

Javascript:

(function() {
var dragFile;
// getElementById
function $id(id) {
    return document.getElementById(id);
}


// output information
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}


// file drag hover
function FileDragHover(e) {

    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}


// file selection
function FileSelectHandler(e) {

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    formBuilder(files);
    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}
function formBuilder(files) {
    console.log("in form builder!");



    dragFile.set("file", files[0]);

    var submitbutton = $id("submit");

    //submitbutton.addEventListener("click", , false);

    document.getElementById("submit").addEventListener("click", function(){
        formuploading(dragFile);
        dragFile.delete("file", files[0]);
        dragFile.delete("from");
        dragFile.delete("MAX_FILE_SIZE");
        dragFile.delete("to");
        dragFile.delete("_csrf");

        delete dragFile;
    });

}

// output file information
function ParseFile(file) {

    Output(
        "<p>File information: <strong>" + file.name +
        "</strong> type: <strong>" + file.type +
        "</strong> size: <strong>" + file.size +
        "</strong> bytes</p>"
    );

}


// initialize
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    var form = document.getElementById("upload");
    console.log("in initialize");
    dragFile = new FormData(form);

    // file select

    // is XHR2 available?
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    if (xhr.upload) {

        // file drop
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        submitbutton.style.display = "inline-block";
    }

}

// call initialization file
if (window.File && window.FileList && window.FileReader) {
    Init();
}

function formuploading(formData) {


    console.log("in form uploading");

 // Display the key/value pairs
    for (var [key, value] of formData.entries()) { 
          console.log(key, value);
        }

   // console.log(document.getElementById(("form#upload")));
    $.ajax({
        url: "/upload",
        type: 'POST',
        data: formData,
        success: function (data) {
            document.getElementById("fileselect").value = "";
            //location.reload();
        },
        cache: false,
        contentType: false,
        processData: false
    });

}

$("form#upload").submit(function(e) { 

    document.getElementById("messages").innerHTML = "";

    e.preventDefault();    


    //do IF block to check if there is formdata being passed? or if the value of the input select field is empty. 
    if (document.getElementById("fileselect").value != ""){

        var formData = new FormData(this);
        formuploading(formData);

    }else{
        console.log("file select is empty :)");
        return false;
    }
});

})();

（函数（）{
var-dragFile；
//getElementById
函数$id（id）{
返回文档.getElementById（id）；
}
//输出信息
函数输出（msg）{
var m=$id（“消息”）；
m、 innerHTML=msg+m.innerHTML；
}
//文件拖动悬停
函数FileDragHover（e）{
e、 停止传播（）；
e、 预防默认值（）；
e、 target.className=（e.type=“dragover”？“hover”：“”）；
}
//文件选择
函数FileSelectHandler（e）{
//取消事件和悬停样式
FileDragHover（e）；
//获取文件列表对象
var files=e.target.files | | e.dataTransfer.files；
formBuilder（文件）；
//处理所有文件对象
for（var i=0，f；f=files[i]；i++）{
解析文件（f）；
}
}
函数formBuilder（文件）{
log（“在表单生成器中！”）；
dragFile.set（“文件”，文件[0]）；
var submitbutton=$id（“提交”）；
//submitbutton.addEventListener（“单击”，false）；
document.getElementById（“提交”）.addEventListener（“单击”，函数）（）{
表单上传（dragFile）；
删除（“文件”，文件[0]）；
dragFile.删除（“从”）；
删除（“最大文件大小”）；
dragFile.删除（“to”）；
dragFile.删除（“_csrf”）；
删除拖拽文件；
});
}
//输出文件信息
函数解析文件（文件）{
输出(
“文件信息：”+File.name+
“类型：”+file.type+
“大小：”+file.size+
“字节
”
);
}
//初始化
函数Init（）{
var fileselect=$id（“fileselect”），
filedrag=$id（“filedrag”），
submitbutton=$id（“submitbutton”）；
var form=document.getElementById（“上传”）；
console.log（“登录初始化”）；
dragFile=新表单数据（表单）；
//文件选择
//XHR2可用吗？
var xhr=new XMLHttpRequest（）；
console.log（xhr）；
if（xhr.upload）{
//文件放置
filedrag.addEventListener（“dragover”，FileDragHover，false）；
filedrag.addEventListener（“dragleave”，FileDragHover，false）；
addEventListener（“drop”，FileSelectHandler，false）；
filedrag.style.display=“block”；
submitbutton.style.display=“内联块”；
}
}
//调用初始化文件
if（window.File&&window.FileList&&window.FileReader）{
Init（）；
}
函数formupload（formData）{
console.log（“表单上传”）；
//显示键/值对
FORM数据项（）的（var[key，value]）{
console.log（键、值）；
}
//log（document.getElementById（（“form#upload”））；
$.ajax({
url:“/upload”，
键入：“POST”，
数据：formData，
成功：功能（数据）{
document.getElementById（“fileselect”）.value=“”；
//location.reload（）；
},
cache:false，
contentType:false，
processData:false
});
}
$（“上传表格”）。提交（功能（e）{
document.getElementById（“消息”）.innerHTML=“”；
e、 预防默认值（）；
//执行IF块检查是否传递formdata？或输入选择字段的值是否为空。
if（document.getElementById（“fileselect”）.value！=“”）{
var formData=新formData（本）；
表单上传（formData）；
}否则{
log（“文件选择为空：）”；
返回false；
}
});
})();

您是尝试在文件拖放或按钮单击时发送AJAX？当然，在拖放完成后，单击按钮。