0

我不明白如何将 jQuery 插件与我的 Ajax 函数集成以发布 Django 表单。我见过只处理一个字段的示例，即要上传的文件。但是如果我的表单包含其他字段（文本框、选择等）怎么办？

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

<form id="import_form" class="form-horizontal" method="post" enctype="multipart/form-data">{% csrf_token %}
    {{ form.non_field_errors }}
    <div id="fileToImportChoice" class="fieldWrapper">
        {{ form.fileToImport.errors }}
        {{ form.fileToImport }}
    </div>
    <div id="file_to_import" class="fieldWrapper">
        {{ form.csvFile.errors }}
        {{ form.csvFile }}
    </div>
    <input type="button" id="import_button" value="IMPORT" onclick="javascript:display_message('{% url import %}', document.getElementById('import_form'))" />
</form>

这是我的jquery 函数：

function display_message(link, form)
{
    var datastring = $(form).serialize();
    $.ajax(
    {
        url: link,
        type: 'POST',
        dataType: 'json',
        enctype: "multipart/form-data",
        data: datastring,
        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
            {
            }
        }
    });
}

第一个问题：我应该在我的datastring变量中插入文件名吗？目前，每次我显示表单错误时，Django 都会抱怨 mycsvFile是空的，即使我之前选择了要上传的文件。我想没有插件是正常的。对？

现在，我的主要问题是：如何将 jQuery 插件与我的函数集成？我见过一个简单的叫Simple-Ajax-Uploader. 这是如何使用它的示例：

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
    }
});

所以最后......如何将文件数据与我的表单的其他数据一起发送？我的想法是在我的函数中调用插件，display_message然后更新datastring包含要发布到我的视图的所有数据的变量。如果是这样，怎么做？

编辑： 我正在寻找一个简单的插件，只需上传一个文件，不需要自定义 css。我希望它是便携的（所以HTML5被FormData排除在外）。

4

2 回答 2

1

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

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


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

您将需要处理loadiframe 上的事件并使用类似iframe.contentDocument.body.innerHTML的方法来读取 iframe 的内容（服务器应返回带有<body>标签的 HTML 以实现跨浏览器兼容性）。实际的 iframe 元素可以使用 JavaScript 动态创建和隐藏。

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

于 2013-09-04T18:41:02.833 回答
0

您可以使用FormData对象通过 ajax 上传文件

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
            {
            }
        }
    });
}
于 2013-09-04T17:11:49.290 回答