1

JQuery フォームを使用して Ajax/iframe 経由で送信したいファイル アップロード フォームがあります。単純なときは機能していましたが、さらに追加すると機能しなくなりました。

私のフォームは、フィールド ラベルをクリックするとファイル アップロード ダイアログがポップアップするように設定されています。ファイルを選択すると、フォームが送信されます。「変更されました!」というアラートが表示されます。と「準備中！」、そして何もありません。

Safari の開発者ツールでデバッグを試みましたが、何が問題なのかわかりません。ajaxSubmit の代わりに ajaxForm を使用してみましたが、違いはありませんでした。報告された問題はなく、エラーも表示されません。

これが私のフォームです (これは 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

options 変数にtype: "POST"を定義します。

以下のようなコードを使用してください： -

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

ajaxSubmit はコア jQuery メソッドではないため、javascript ファイルを含めていただければ幸いです。 ajaxSubmit.js

于 2013-09-17T06:06:53.583 に答える