C＃Razor上传文件

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发布

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的所有优势，并且没有必要将此标志设置为true来发出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>

就我而言，如果上传过程成功，我的控制器将返回代码“ 0x001”，否则将返回“ 0x00”。

文件准备好后

    $("#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返回类型。 你会得到的信息这个链接。

希望它可以解决您的问题:)