1

我有一个在对话框中显示的表单，它有一个“提交”按钮，单击该按钮时使用 jQuery 使用 AJAX 将表单发布到服务器。这是一个MVC动作方法。上传的文件始终为空。在使用 Google 时，我读到您通常无法使用 AJAX 发布文件，除非您使用某种插件。

我不想使用插件，我读到这可以通过支持 HTML5 File API 的浏览器来完成，所以我想让它与它一起工作。

我现在不关心拖放或其他任何事情，我只想使用 jQuery 将文件与表单的其余部分一起发布。

到目前为止，我有：

这是表单的部分视图：

@model ImageReceiptLineModel

@using (Html.BeginForm(MVC.EditImageReceiptLine(), FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  @Html.HiddenFor(model => model.ReceiptLineSetID)
  @Html.HiddenFor(model => model.LineNumber)
  <input id="uploadFile" name="uploadFile" type="file" value="Choose New Image" />
  @Html.LabelFor(model => model.ImageDescription)
  @Html.TextBoxFor(model => model.ImageDescription)
}

这是用于发送表单的 jQuery

if ($Form.valid()) {
        // get the url and the form data to send the request
        var Url = $Form.attr('action');
        var FormData = $Form.serialize();

        // now do the ajax call
        $.ajax({
            url: Url,
            data: FormData,
            type: 'POST',
            cache: 'false',
            success: function (data, textStatus, jqXHR) {
                // do something here
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // do something here
            }
        });
    }

这是 MVC 操作方法：

/// <summary>
/// Edit receipt line action
/// </summary>
/// <returns>Action result</returns>
[HttpPost]
public virtual ActionResult EditImageReceiptLine(HttpPostedFileBase uploadFile, ImageReceiptLineModel model)
{

}

我需要添加什么才能将文件添加到表单中？“FormData”是我发布到服务器的序列化表单数据。

4

1 回答 1

2

这是guide关于可用于上传文件的文件 API。但不要忘记这不适用于 IE9。如果您需要支持此类浏览器，您可以使用隐藏的 iframe 来模拟使用 AJAX 上传文件。这就是jquery.form等插件存在的原因。为了使它成为一行代码，这样您就不必担心浏览器支持和其他东西：

if ($Form.valid()) {
    // get the url and the form data to send the request
    $Form.ajaxSubmit({
        success: function (data, textStatus, jqXHR) {
            // do something here
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // do something here
        }
    });
}

更新：

根据评论部分的要求，这里是您可以使用 File API 的方法。

假设您有以下表格：

@using (Html.BeginForm(MVC.EditImageReceiptLine(), null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(model => model.ReceiptLineSetID)
    @Html.HiddenFor(model => model.LineNumber)
    <input id="uploadFile" name="uploadFile" type="file" value="Choose New Image" />
    @Html.LabelFor(model => model.ImageDescription)
    @Html.TextBoxFor(model => model.ImageDescription)    
}

以及一些将触发表单提交的链接：

<a href="#" id="upload">Upload the file using HTML5 File API</a>

现在在一个 js 文件中，您可以拥有以下内容：

$('#upload').click(function () {
    if (!window.FileReader) {
        // the browser doesn't support the File API - there's no need
        // to continue;
        alert('To use this functionality please use a modern browser');
        return;
    }

    var $form = $('form');
    var uri = $form.action;
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    $form.find(':input').each(function () {
        if ($(this).is('input[type="file"]')) {
            var files = $(this)[0].files;
            if (files.length > 0) {
                fd.append(this.name, files[0]);
            }
        } else {
            fd.append(this.name, $(this).val());
        }
    });

    xhr.open('POST', uri, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // handle response.
            alert(xhr.responseText); 
        }
    };

    xhr.send(fd);
});
于 2012-09-21T10:01:06.633 回答