Question

我有一个文件上传表单，我想使用JQuery Form通过Ajax / iframe提交。当它很简单的时候我就让它工作了，但现在我已经添加了更多它，它不起作用。

我的表单已设置好，当您单击字段标签时，会弹出文件上载对话框。选择文件时，表单将被提交。我收到警告说“改变了！”和'准备！'，然后什么都没有。

我已尝试使用Safari的开发人员工具进行调试，但我看不出有什么问题。我尝试过使用ajaxForm代替ajaxSubmit，但它没有任何区别。没有任何报告的问题，我也没有看到任何错误。

这是我的表单（它是Django模板的一部分，但我已经把实际的标签和输入放入，所以你可以看到它的样子）：

<form action="{% url "edit_profile_section" user_id=end_user.pk section=section %}" method="POST" enctype="multipart/form-data" id="picture_form" encoding="multipart/form-data">
    {% csrf_token %}
    <label class="edit-profile-picture" for="id_profile_picture"><span>Edit Profile Picture</span></label>
    <input id="id_profile_picture" name="profile_picture" />
    <button type="submit" name="picture_form" id="picture_form_submit">Save</button>
</form>

这是JavaScript：

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery.form.js"></script>
<script>
    $(document).ready(function() {
        var options = {
            iframe: true,
            dataType: 'json',
            beforeSubmit: showPopup,
            success: editImage
        }
        $('#id_profile_picture').change(function() {
            alert('changed!');
            $('#picture_form').ajaxSubmit(options);
        });
    function showPopup(formData, jqForm, options) {
            alert('preparing!');
            return true;
        }
        function editImage(responseText, statusText, xhr, $form) {
            alert('status:' + statusText + ', response:' + responseText);
        }
    });
</script>

Answer 1

我希望你包含ajaxSubmit的javascript文件，因为它不是核心的jQuery方法。 ajaxSubmit.js

Answer 2

在您的期权变量中定义类型：“POST”。

所以使用如下代码： -

var options = {
        iframe: true,
        type: "POST",
        dataType: 'json',
        beforeSubmit: showPopup,
        success: editImage
    }

Answer 3

事实证明我的部分代码很好，问题出在其他地方。页面上有多个表单，在我的Django代码中，我通过提交按钮的名称区分它们，所以它不起作用，因为我绕过了提交按钮。我将提交按钮名称添加到data的{{1}}选项中，现在工作正常。谢谢你的帮助！

JQuery Form ajaxSubmit不起作用

3 个答案: