上传文件数据和表单数据答案

【问题标题】：Upload file data and form data上传文件数据和表单数据
【发布时间】：2015-10-06 03:26:49
【问题描述】：

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

这是我获取数据的 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"); }
});

上传文件方法二

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 个字段。

【问题讨论】：

为什么要将 jQuery 中的 $.ajax 与低级 XMLHttpRequest API 混合使用？为什么不始终坚持其中一个？另外，你为什么要上传data 两次？一次是jsonText 的一部分，一次是单独的？
到底是什么问题？你的帖子很混乱。表单数据发布本身是否有效？文件上传可以自己工作吗？您是否只是想弄清楚如何先上传文件，然后在完成后上传数据？
您是在尝试读取文件的内容并保存它，还是尝试上传文件并保存有关它的元数据？
是的，ajax 和 XMLHTTPRequest 都是由他们自己工作的。 @RickS 我正在尝试上传文件，然后上传完成后的数据。
不要在 cmets 中发布长代码。它需要在问题本身中。

标签： javascript jquery asp.net ajax html

【解决方案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);

【讨论】：