Question

我试图将一些数据与上传的文件一起发布。作为第一次，我试图传递我希望在服务器端检索的所有数据作为参数。即使我设法检索参数的值＆＃34; Mode＆＃34;正确。我从未收到参数＆＃34; file＆＃34;的值。我不知道为什么？

以下是我的代码：

控制器：

public ActionResult ReadFromExcel(HttpPostedFileBase file, bool Mode)
{
    // file is always null
    // Mode receives the correct values.
}

脚本：

$(document).ready(function () {
$("#ReadExcel").click(function () {

    var overwritefields = $("#overwritefields").is(":checked");


    $.ajax({
        type: "POST",
        url: 'ReadFromExcel',
        data: '{"file":"' + document.getElementById("FileUpload").files[0] + '","Mode":"' + overwritefields + '"}',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        processData: false,
        success: function (response) {
            // Refresh data

        },
        error: function (error) {
            alert("An error occured, Please contact System Administrator. \n" + "Error: " + error.statusText);
        },
        async: true
    });
});

然后我尝试通过Request.File [0]访问文件，这在某种程度上是成功的。但是如何检索其他表单数据的值，例如＆＃34; Mode＆＃34;？

以下是我的代码：

控制器：

public ActionResult ReadFromExcel()
{
    var file = Request.Files[0].
    // file contains the correct value.
    // Unable to retrieve mode value though.
}

脚本：

$(document).ready(function () {
$("#ReadExcel").click(function () {

    var formData = new FormData();
    formData.append("FileUpload", document.getElementById("FileUpload").files[0]);


    var overwritefields = $("#overwritefields").is(":checked");
    formData.append("Mode", overwritefields);


    $.ajax({
        type: "POST",
        url: 'ReadFromExcel',
        data: formData,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        processData: false,
        success: function (response) {
            // Refresh data

        },
        error: function (error) {
            alert("An error occured, Please contact System Administrator. \n" + "Error: " + error.statusText);
        },
        async: true
    });
});

以下是我的观点：

@model IPagedList<Budget>

@{
ViewBag.Title = "Import Budget Line Items From Excel";
var tooltip = new Dictionary<string, object>();
tooltip.Add("title", "Click to import budget line items from Excel");

int pageSize = 10;
string sortname = "ItemCode";
string sortorder = "asc";
string filter = "";
bool hasFilter = false;
if (Session["BudgetImportGridSettings"] != null)
{
    //
    // Get from cache the last page zise selected by the user.
    //
    Impetro.Models.Grid.GridSettings grid = (Impetro.Models.Grid.GridSettings)Session["BudgetImportGridSettings"];
    pageSize = grid.PageSize;
    sortname = grid.SortColumn;
    sortorder = grid.SortOrder;
    filter = grid.HasFilter ? grid.FilterString : "";
    hasFilter = grid.HasFilter && grid.Filter.rules.Count > 0;
}

}


<h2>@ViewBag.Title</h2>


<br style="clear: both;" />
<input type="file" id="FileUpload" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<span class="buttonspan backtolist" id="ReadExcel" title="Click to import budget line items from Excel"><a href="#" title="Click to import budget line items from Excel">Import</a></span>
<br style="clear: both;" />
<br style="clear: both;" />
<input type="checkbox" id="overwritefields" title="Overwrite other fields with imported non-blank data" class="chkclass" value=false />

<br style="clear: both;" />
<br style="clear: both;" />

@Html.Partial("_BudgetImportGrid")
<input type="hidden" value="@ViewBag.BudgetType" id="IntBudgetType" />

Answer 1

一种简单的方法就是将bool mode添加到操作方法中：

public ActionResult ReadFromExcel(bool Mode)
{
    //Use the selected Mode...

    var file = Request.Files[0].
    // file contains the correct value.
    // Unable to retrieve mode value though.
}

Answer 2

我希望您可以使用HTML5文件阅读器API。以下解决方案使用它：

我已经从头开始构建您的方案，以确保我的建议有效。

要点：

bool mode作为操作方法参数。它使用Query String提供给服务器。
作为二进制文件作为请求正文的一部分上传的文件。二进制数据是使用FileReader HTML5 API获得的。这是obly HTML5部分，如果你可以替换它，那么你可能会得到HTML5依赖。
AJAX是一个POST请求！

使用以下JavaScript：

$(function(){
    $("#upload").click(function () {
        var overwritefields = $("#overwritefields").is(":checked");

        var r = new FileReader();
        r.onload = function () {
            $.ajax({
                type: "POST",
                url: 'UploadFileWithBoolean?mode=' + overwritefields,
                data: r.result,
                contentType: 'application/octet-stream',
                processData: false,
                success: function (d) {
                    console.log("ok");
                    console.log(d);
                },
                error: function (d) {
                    console.log("fail");
                    console.log(d);
                },
                async: true
            });
        };
        r.readAsBinaryString(document.getElementById("FileUpload").files[0]);
    });
});

控制器方法：

[HttpPost]
public ActionResult UploadFileWithBoolean(bool mode)
{
    //your file is now in Request.InputStream
    return Json(new { message = "mode is " + mode.ToString(), filesize = Request.InputStream.Length });
}

如果这有帮助，请告诉我。感谢

在服务器端访问ajax post表单数据

2 个答案: