jquery - 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 () { },
    });
});

在服务器端（控制器）做处理程序：

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

我希望这可以帮助您节省时间；）

Answer 2

form.serialize不管理文件输入。您必须使用formDataadeneo 建议的 XMLHttpRequest，请参阅此处的示例用法。对于较旧的浏览器，有一些解决方案使用 iframe 并以 iframe 为目标发布表单。一些 jquery 插件将为您完成所有这些工作，例如JQuery-File-Upload（但还有很多其他插件）。

Answer 3

我使用了这个具有上传文件功能的jQuery 插件。

HTML：

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

Java脚本：

$('form').ajaxForm({
    beforeSend: function() {

    },
    uploadProgress: function(event, position, total, percentComplete) {

    },
    success: function() {

    },
    complete: function(xhr) {

    }
});

Answer 4

我通过在 google 上查询“Using FormData Objects”找到了这个小小的“香草”框架。

使用者：

AJAXSubmit(myForm);

只需修改

function ajaxSuccess (){/*here*/}

如果您 console.log() 上的响应， ajaxSuccess 您可以看到提交给服务器的数据。它在submittedData财产上。