jQuery ajax，使用输入类型文件和 Json 发送表单答案

【问题标题】：jQuery ajax, send form with input type file and JsonjQuery ajax，使用输入类型文件和 Json 发送表单
【发布时间】：2013-07-18 08:32:50
【问题描述】：

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

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

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

所以，当我只有简单的输入（如文本、选择等）时。没关系。但是如果我有一个输入类型的文件，我就无法检索我的文件。 $_FILES 始终为空。

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

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

【问题讨论】：

使用formData！
How can I upload files asynchronously with jQuery?的可能重复
@Clément Andraud，不确定这是否会对您有所帮助，但请查看wordpress.stackexchange.com/questions/71170/… 您可能会有所了解。

标签： jquery ajax file

【解决方案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 ..;
    }

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

【讨论】：

【解决方案2】：

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

【讨论】：

在 IE10 中开始支持 formData，这就是为什么我也建议使用使用 iframe 的插件来支持旧版浏览器。 +1
嗯，我的问题，我在自定义 CMS 上工作。保存新内容的功能已经写好了..所以如果我可以编辑这个脚本而不重写所有... ^^
好吧，如果您可以放弃对旧浏览器的支持，您可以编辑您的脚本以使用 formData。如果你不能（放弃 IE 8 和 9 是相当激烈的），恐怕你将不得不走得更远一点。但是有些插件会完成所有繁重的工作，所以它不应该很复杂。
你知道一个很简单的插件吗？
LeftyX 列出的那个看起来很简单

【解决方案3】：

我通过在 google 上查询“Using FormData Objects”找到了这个little "vanilla" framework。

使用者：

AJAXSubmit(myForm);

修改一下

function ajaxSuccess (){/*here*/}

如果您 console.log() 对 ajaxSuccess 的响应，您可以看到提交到服务器的数据。它位于submittedData 属性上。

【讨论】：

【解决方案4】：

我使用了这个jQuery plugin，它具有upload files 的功能。

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) {

    }
});

【讨论】：

我会做与 streetpc 的回答 +1 相同的评论