jquery上传文件插件与Django表单的集成

我不知道如何将jQuery插件与我的Ajax函数集成以发布Django表单。我看到的示例只涉及一个字段，即要上载的文件。但如果我的表单包含其他字段（文本框、选择等），该怎么办

这是我的html表单（我有一个下拉列表和一个要上传的文件）：

所以最后。。。如何将文件数据与表单的其他数据一起发送？我的想法是在我的

display\u message

函数中调用插件，然后更新我的

datastring

变量，该变量包含要发布到我视图中的所有数据。如果是，怎么做

编辑： 我正在寻找一个简单的插件，只需上传一个文件，无需定制css。我希望它是可移植的（因此排除了HTML5和FormData）

function display_message(link, form)
{
    var formData = new FormData(form);
    $.ajax(
    {
        url: link,
        type: 'POST',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: formData,
        success: function(result)
        {
            //form not valid -> displays errors
            if (result.form_errors)
            {
                //append current errors to the html form
                errors=result.form_errors
                for (var key in errors)
                {
                    $("#"+key+"_errors").html('<ul class="errorlist"><li>'+errors[key]+'</li></ul>');
                    //~ alert(key+': '+errors[key]);
                }
            }
            else
            {
            }
        }
    });
}

功能显示\信息（链接、表单）
{
var formData=新formData（表格）；
$.ajax(
{
网址：link，
键入：“POST”，
数据类型：“json”，
processData:false，
contentType:false，
数据：formData，
成功：功能（结果）
{
//表单无效->显示错误
如果（结果表格错误）
{
//将当前错误附加到html表单
错误=result.form\u错误
for（变量输入错误）
{
$（“#”+key+“_errors”）.html（“
”+errors[key]+”
）；
//~alert（key+：“+错误[key]）；
}
}
其他的
{
}
}
});
}

上传包含所有文件的整个表单的一种方法是将表单发送到一个隐藏的iframe，并读取iframe的内容以供服务器响应。示例代码：

<form method="post" action="..." enctype="multipart/form-data" target="iframe-name">
    ...
</form>


<iframe name="iframe-name"></iframe>

...

您需要处理iframe上的

load

事件，并使用类似这样的

iframe.contentDocument.body.innerHTML

来读取iframe的内容（服务器应返回带有

标记的HTML，以实现跨浏览器兼容性）。可以使用JavaScript动态创建和隐藏实际的iframe元素

---

编写这样的插件相当容易，但另一方面，互联网上的一些上传插件可能使用这种方法上传文件。

我知道这个解决方案，它非常简单。。。问题是：它不适用于所有浏览器，尤其是刚刚检查过的IEI。。。我想做的似乎太多了。。。我只有一个文件要上传。而且不需要定制css。您推荐什么插件？我可以使用iframe将我的文件字段和ajax函数中的其他字段一起发送吗？如果是这样，你能开发你的例子吗？我并没有完全使用你的方法，但我使用了一个iframe:。不需要再使用ajax了，所以我在ajax函数中的代码（例如用来处理错误）我只是把它放在我的iframe函数中。现在它工作了：）。非常感谢。

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

function display_message(link, form)
{
    var formData = new FormData(form);
    $.ajax(
    {
        url: link,
        type: 'POST',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: formData,
        success: function(result)
        {
            //form not valid -> displays errors
            if (result.form_errors)
            {
                //append current errors to the html form
                errors=result.form_errors
                for (var key in errors)
                {
                    $("#"+key+"_errors").html('<ul class="errorlist"><li>'+errors[key]+'</li></ul>');
                    //~ alert(key+': '+errors[key]);
                }
            }
            else
            {
            }
        }
    });
}

<form method="post" action="..." enctype="multipart/form-data" target="iframe-name">
    ...
</form>


<iframe name="iframe-name"></iframe>