jQuery ajax，发送带有输入类型文件和 Json 的表单

Question

我有一个包含多个输入和其他字段的表单。

我有一个保存按钮，当我单击时，我使用 jQuery 使用 ajax 发送表单:

$.ajax({
        type:       "POST",
        dataType:   "json",
        url:        $('#ajaxUrl').val(),
        data:       "action=save&" + form.serialize()
});

所以，当我只有简单的输入(如文本、选择等)时，就可以了。但如果我有输入类型文件，我将无法检索我的文件。 $_FILES 始终为空。

我怎样才能尽可能简单地做到这一点？

编辑:我不想使用插件:)

Answer 1

ASP.NET MVC 的实现:

开始制作表单包装:

<form id="inputform">
    <input class="hide" type="file" name="file" id="file" />
</form>

创建一个客户端处理程序来发送:

$("#yourButton").bind('click', function () {
    var data = new window.FormData($('#inputform')[0]);
    $.ajax({
        xhr: function () {  
            return $.ajaxSettings.xhr();
        },
        type: "POST",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        url: "@Url.Action("MethodName", "ControllerName")",
        success: function () { },
        error: function () { },
    });
});

在服务器端( Controller )执行处理程序:

    public ActionResult MethodName(HttpPostedFileWrapper file) {
    var img = Image.FromStream(file.InputStream);
       ....
       return ..;
    }

我希望这能帮助您节省时间;)