Javascript 使用formdata append with@HTML.BeginForm而不使用ajax调用

我试图实现的是将一个文件附加到一个post请求，该请求是我使用javascript从拖放字段获得的。 问题是，我不想读取所有输入字段并通过ajax调用发布数据，我想使用

@HTML.BeginForm

中的默认提交方法。 当我这样做时，

多部分

实际上并不包含该文件

（注意：当我只提交文件时，或者当我手动读取所有输入字段并使用单独的ajax提交时，它会起作用。）

我的代码： 拖放js:

var file;
var isDragged = false;
var formData;
function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

        formData = new FormData($("#form"));
        formData.append("File.PayLoad", file);
        formData.append("File.FileMetadataId", $('#File_FileMetadataId').val())
        formData.append("File.FileObjectId", $('#File_FileObjectId').val())      
   }
}

更新：

---

我发现，您可以通过文件输入覆盖文件，但只能在Chrome中。因为我需要它来处理IE 11，这对我没有帮助，但可能对其他人有帮助。您不需要附加所有表单字段，只需将输入类型文件设置为您删除的文件并提交…

您遇到了几个问题。问题之一是下面的代码。您的代码中缺少一个

}

如果按如下方式放置，则最后一个值仅存储在

文件中，这是不正确的

for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];
} // missing }

function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

    formData = new FormData($("#form"));
    formData.append("File.PayLoad", file);
    formData.append("File.FileMetadataId", $('#File_FileMetadataId').val());
    formData.append("File.FileObjectId", $('#File_FileObjectId').val());    
   }
} // missing }

第二个问题是
ev.dataTransfer.files
。如中所示，最好检查
ev.dataTransfer.items
，有时它有您的文件，而
ev.dataTransfer.files
为空

最后，您可以这样做：

function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();    

    formData = new FormData($("#form"));

    if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
            // If dropped items aren't files, reject them
            if (ev.dataTransfer.items[i].kind === 'file') {
                var file = ev.dataTransfer.items[i].getAsFile();
                formData.append("File.PayLoad" + i, file);
            }
        }
    } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
            file = ev.dataTransfer.files[i];
            formData.append("File.PayLoad" + i, file);
        }
    }
}

函数dropHandler（ev）{
IsDraged=正确；
ev.preventDefault（）；
formData=新的formData（$（“#表格”）；
if（ev.dataTransfer.items）{
//使用DataTransferItemList接口访问文件
对于（变量i=0；i
您确定生成的HTML中存在type=“file”吗？是的，渲染时，有一个带有“Browse..”按钮的典型文件输入框缺少的大括号仅在此处，不在我的代码中，对此表示抱歉。这个文件也不是问题，因为当我直接通过ajax调用提交它时，它可以工作，而不需要表单的其余部分。
function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

    formData = new FormData($("#form"));
    formData.append("File.PayLoad", file);
    formData.append("File.FileMetadataId", $('#File_FileMetadataId').val());
    formData.append("File.FileObjectId", $('#File_FileObjectId').val());    
   }
} // missing }

function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();    

    formData = new FormData($("#form"));

    if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
            // If dropped items aren't files, reject them
            if (ev.dataTransfer.items[i].kind === 'file') {
                var file = ev.dataTransfer.items[i].getAsFile();
                formData.append("File.PayLoad" + i, file);
            }
        }
    } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
            file = ev.dataTransfer.files[i];
            formData.append("File.PayLoad" + i, file);
        }
    }
}