Question

基本上我要做的是通过Ajax调用提交拖放formdata对象。但是，如果我拖放文件，请按提交。然后拖放另一个文件，旧的formdata对象仍然存在并尝试通过。我在控制台中收到一个错误（现在它是一个403错误，因为我删除了CSRF令牌，我知道这是因为我删除了formdata中的所有内容，因为我不希望将额外的东西传递到后端，我只是传递一个empty 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;
    }
});

})();

如何删除FormData对象

0 个答案: