Question

我使用cshtml作为视图

这是我的意见：

@Html.TextArea("DESCRIPTION", null, new { @class = "field-longtext", @cols = 100, @rows = 5, maxlength = 255 })

@Html.TextBox("DOC_TYPE", null, new { @class = "field-longtext", maxlength = 10 })

@Html.TextBox("DOC_FILE", null, new { @class = "field-longtext", @type = "file" })

并使用ajax post

function UploadFile() {

    var url = '@Url.Action("CreateUploadFile")';
    var data = {};
    var result = false;

    $('#@ViewBag.FormName').find('input, textarea').each(function () {
        data[$(this).attr('name')] = $(this).val();
    });

    data.PROBLEM_CALL_ID = @Model.Model.PROBLEM_CALL_ID;

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        async: false,
        success: function (data) {
            if (data.result) {
                var selectedRow = SubFormService.tableList['#@ViewBag.TableName'].selectedRow;
                result = true;
            } else {
                alert(data.errorMsg);
                result = false;
            }
        }
    });

    return result;
}

我的控制器：

    [HttpPost]
    public ActionResult CreateUploadFile(Models.Shared.DocumentModel vm)
    {
        var id = -1;
        var result = string.Empty;
        var json = new BasicJsonResult();

        var file = vm.DOC_FILE;

        LogUtility.Debug(file.ContentLength.ToString());
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            LogUtility.Debug(fileName);
            LogUtility.Debug(Server.MapPath("~/Images/"));
            var path = Path.Combine(Server.MapPath("~/Images/"), fileName);
            file.SaveAs(path);
        }

        return Json(json, JsonRequestBehavior.AllowGet);
    }

代码var file = vm.DOC_FILE;警告我（对象引用未设置为对象的实例。），但我可以获得另一个控件值（vm.DESCRIPTION, vm.DOC_TYPE）。

请帮忙。

另外，我想在上传文件时下载文件。

Answer 1

随着XHR2的推出，现在可以使用AJAX上传文件。您可以使用FormData来实现此目的。假设您的输入元素位于<form>内，您可以尝试此操作（在此格式中还包含PROBLEM_CALL_ID字段的隐藏输入，以便将其发送到服务器）：

function UploadFile() {
    var url = '@Url.Action("CreateUploadFile")';
    var formData = new FormData($('form')[0]);
    var result = false;

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        async: false,
        success: function (data) {
            ...
        }
    });

    return result;
}

因此，请确保已将输入元素包装在表单标记内（最好使用id，以便您可以更具体地选择它）：

<form id="myForm">
    @Html.TextArea("DESCRIPTION", null, new { @class = "field-longtext", @cols = 100, @rows = 5, maxlength = 255 })

    @Html.TextBox("DOC_TYPE", null, new { @class = "field-longtext", maxlength = 10 })

    @Html.TextBox("DOC_FILE", null, new { @class = "field-longtext", @type = "file" })

    @Html.HiddenFor(x => x.PROBLEM_CALL_ID)
</form>

然后选择这样的表格：

var formData = new FormData($('#myForm')[0]);

也请，请不要那样做：

async: false

通过执行此操作，您将失去对服务器的异步调用的全部目的。如果设置此标志，浏览器将在文件上载期间冻结，这是一种绝对可怕的用户体验。如果您这样做，那么您最好使用普通的HTML表单提交来上传文件 - 您正在失去AJAX的所有好处，并且没有必要在此标志设置为的情况下发出AJAX请求真。

Answer 2

如果您想使用ajax上传文件，则应使用iframe。

<iframe name="upload-data" id="upload-data" frameborder="0" width="0" height="0"></iframe>
<form id="frm-add-update" enctype="multipart/form-data" method="post" target="upload-data"> 
    // HTML Code 
</form>

在我的情况下，我的控制器会返回一个代码，＆＃34; 0x001＆＃34;如果上传过程成功，否则它将返回＆＃34; 0x00＆＃34;。

文件准备好后

    $("#upload-data").hide();
    $("#upload-data").load(function () {
        var data = $.parseJSON($("#upload-data").contents().text());
        if (data != null) {
            if (data.code != "0x001") {
                // you got a problem
            }
            else {
                // you got no problem
            }
        }
    });

在控制器

中

[Authorize, HttpPost]
    private JsonResult ActionNAme(ModelClass modelObj, HttpPostedFileBase htmlFileTagName)
    {
        string code = "0x001";
        string message = "";
        try
        {
            // your process here
        }
        catch(Exception)
        {
            code = "0x000";
            message = ex.Message;
        }

        return new JsonResult()
        {
            Data = new
            {
                code = code,
                message = message
            }
        };
    }

为了下载上传的文件，我认为您应该更改Action返回类型。您将从this链接获取信息。

希望它能解决你的问题：）

C＃Razor上传文件

2 个答案: