上传文件数据和表单数据

Question

我正在尝试传递表单数据以及要上传的文件中的数据。但是，我只能设法传递表单数据或文件数据，但不能同时传递两者。

这是我的JavaScript来获取数据

var form = document.getElementById('AddDocs');
var data = new FormData(form);
var columns = [];
var values = [];

for (var i = 0; i < files.length; i++) {
    data.append(files[i].name, files[i]);
    ParseFile(files[i]);
}
var propertyRows = document.getElementsByClassName("docPropertiesTable")(0).rows;
for (var i = 0; i < propertyRows.length - 1; i++) {
    //
    if (propertyRows(i).cells(1).children(0).value != "") {
        //if there is a value
        values.push(propertyRows(i).cells(1).children(0).value);
        data.append("value" + i, propertyRows(i).cells(1).children(0).value);
        //push the dataid of the column on to the array
        columns.push(propertyRows(i).cells(1).children(0).name.split("|")[0]);
        data.append("columns" + i, propertyRows(i).cells(1).children(0).name.split("|")[0]);

    }
}

var jsonText = JSON.stringify({ columns: columns, values:values, data:data });
$.ajax({
    type: "POST",
    url: "EnterpriseUtilities.aspx/ProcessEnterpriseUpload",
    data: jsonText,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    failure: function () { alert("Uh oh"); }
});

方法2，上传文件

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText) {
        alert("upload done!");
    } else {
        //alert("upload failed!");
    }
};
xhr.open('POST', "UploadFile.aspx");
xhr.send(data);

当前，ajax调用正在获取表单数据，然后XMLHTTPRequest正在获取文件。 我需要确保先上传文件，然后再将数据插入数据库。 如何在不丢失表单数据的情况下实现文件的上传？

编辑：我试图通过XMLHTTP或任何必要的手段来上传文件。 然后，我需要获取用户输入的元数据（表单数据）。 两种方法均独立工作。

我的asp.net处理信息的方法是

 <WebMethod()> _
    Public Shared Function ProcessEnterpriseUpload(columns() As String, values() As String, data As Object) As String
        //process information 
    End Function

我主要是一名桌面开发人员，并且正在寻找有关如何进行此工作的指南。

编辑2

用于上下文的图像。

http://imgur.com/pizi4yk

将文件拖放到表上。 填写文件信息，然后完成后，我需要上传实际文件本身以及用户在右侧填写的所有数据。 右边还有更多字段，但为简单起见，我列出了前2个字段。

Answer 1

我想到了。 我上传文件，如果成功，则发送要处理的元数据

 var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText) {
                 alert("upload done!");
                 var jsonText = JSON.stringify({ columns: columns, values:values});
                $.ajax({
                    type: "POST",
                    url: "EnterpriseUtilities.aspx/ProcessEnterpriseUpload",
                    data: jsonText,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    failure: function () { alert("Uh oh"); }
                });
            } else {
                //alert("upload failed!");
            }
        };
        xhr.open('POST', "UploadFile.aspx");
        xhr.send(data);