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>

Сreate客户端处理程序发送：

$("#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无法管理文件输入。正如adeneo建议的那样，您必须使用formData的XMLHttpRequest，请参阅example usage here。对于旧版浏览器，有使用iframe的解决方案，并以iframe作为目标POST表单。一些jquery插件会为你做所有这些，比如说，JQuery-File-Upload（但还有很多其他插件存在）。

Answer 3

我已经使用了具有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>

Javascrtipt：

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

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

    },
    success: function() {

    },
    complete: function(xhr) {

    }
});

Answer 4

我通过查询＆＃34;使用FormData Objects＆＃34;找到了这个little "vanilla" framework。在谷歌。

用于：

AJAXSubmit(myForm);

只需修改

function ajaxSuccess (){/*here*/}

如果你在 ajaxSuccess 上的console.log（）响应，你可以看到提交给服务器的数据。它在submittedData属性上。

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

4 个答案: