1

我有一个文件上传表单，我想使用 JQuery 表单通过 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>
4

3 回答 3

2

在您的选项变量中定义类型：“POST” 。

所以使用如下代码： -

var options = {
        iframe: true,
        type: "POST",
        dataType: 'json',
        beforeSubmit: showPopup,
        success: editImage
    }
于 2013-09-17T08:14:43.187 回答
2

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

于 2013-09-17T06:06:53.583 回答
0

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

于 2013-09-17T08:52:13.927 回答