上传文件数据和表单数据

时间:2015-10-01 14:25:37

标签: javascript jquery asp.net ajax html5

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

这是我获取数据的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个字段。

1 个答案:

答案 0 :(得分:0)

我明白了。我上传文件然后如果成功发送要处理的元数据

SocialLoginActivity