HTML5、文件API和jQuery发布镜像

Question

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

我不希望使用插件，我读到这可以通过支持HTML5文件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“是我发送到服务器的序列化表单数据。

Answer 1

这是一个关于File API的guide，可以用来上传文件。但别忘了这在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);
});