7

GETリンクとフォーム（および）にpjaxを使用することに成功しましたPOST。しかし今、私はまた送信しなければならないフォームを持っています<input type="file"...>。pjaxはこれをサポートしていないため、https：//github.com/malsup/form（jquery.formプラグイン）を確認しました。これは、ファイルを使用したフォームデータの送信をサポートしていますが、ブラウザーでの「pjax」の操作方法ではサポートしていません。履歴オブジェクト。

では、ファイルフィールドを含むフォームでpjax機能をどのように使用できるでしょうか。何か案は？

編集：私が単にFormDataオブジェクトを使用するのではなく、jquery.formプラグインを使用する理由：InternetExplorerはそれらを処理できません。また、プラグインにはこのブラウザの回避策があります。私はjquery.formプラグインを使用することを主張していませんが、すべての主要なブラウザーで機能させる方法が必要です。

4

4 に答える 4

5

FormDataファイルを処理できる AJAX/pJAX リクエストでオブジェクトを使用する必要があるようです。詳細については、Mozilla Developer Networkを参照してください。

たとえば、これがフォームの場合:

<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>

最初に次のようにファイルの内容を取得します。

var formData = new FormData($('form')[0]);

$.ajax次に、jQueryリクエストまたは次のXMLHttpRequest();ような単純なものを使用できます。

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.com/processfile.php");
xhr.send(formData);

または同様にjQueryで：

$.ajax({
    url: 'http://foo.com/processfile.php',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

サーバー側ではprocessfile.php、次の方法でファイルの内容を受信/表示できます。

$file = $_FILES['file']['name'];

これは非同期であるため、pJAX で動作するはずです。このリクエストは必ず pJAX リクエストの前に配置してください。jQuery を使用している場合は、成功コールバックの一部として追加できます。例 (使用している pJAX ライブラリを知らなくても):

$.ajax({
    url: 'http://foo.com/processfile.php',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
       $.pjax({url: url, container: '#pjax-container'});
    }
});

編集: IE7+ をサポートしたい場合は、FormData が Internet Explorer 10 でのみサポートされているため、アップロードに非表示の iframe 要素を使用するようにフォールバックする必要があります。 //fineuploader.com/ https://github.com/malsup/form (jquery.form プラグイン)よりも優れている/使いやすいと思います。

于 2012-12-19T16:06:11.923 に答える
1

jQueryAjaxコード

jQuery('document').ready(function(){

    var input = document.getElementById("imagefile");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }

    input.addEventListener("change", function (evt) {

        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            //validation to check whether uploaded files are images
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                    };
                    reader.readAsDataURL(file);
                }


                if (formdata) {
                    //send the ajax query to upload the file(s)
                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (result) {
                            jQuery('div#response').html("Successfully uploaded").fadeOut();
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }   
        }

    }, false);


});

HTMLコード

<form enctype="multipart/form-data">
<input id="imagefile" type="file" name="image" accept="image/*"/ />
</form>

上記のコードは、ファイルをアップロードすると、最初に画像のタイプを検証し、ajaxを介してアップロードします。必要に応じて、複数のファイルをアップロードできます。何をするのか疑問に思ったことFormDataがあるなら、

このFormDataオブジェクトを使用すると、XMLHttpRequestを使用して送信するキーと値のペアのセットをコンパイルできます。これは主にフォームデータの送信に使用することを目的としていますが、キー付きデータを送信するためにフォームとは独立して使用できます。送信されるデータは、フォームのエンコードタイプが「multipart / form-data」に設定されている場合に、フォームのsubmit（）メソッドがデータの送信に使用するのと同じ形式です。

addEventListenerが行うことは、

addEventListener（）は、単一のターゲットに単一のイベントリスナーを登録します。イベントターゲットは、ドキュメント内の単一の要素、ドキュメント自体、ウィンドウ、またはXMLHttpRequestの場合があります。

upload.phpサーバーレベルでファイルをアップロードするために使用できます。

プラグインでこの機能を使用したい場合は、上記のコードでプラグインを拡張できます。これは、作業を完了する非常に単純なコードスニペットであるため、プラグインをブリックすることはありません。コードをプラグインに問題なく統合できました。

何か問題があれば私に知らせてください。

于 2012-12-21T02:02:44.617 に答える
0

ファイルのアップロードに個別にuploadifyを使用し、そのコールバック関数でアップロードされたファイルパスでフォームを更新するか、アップロードステータスをtrueまたはfalseに設定するだけで、フォームを送信するときにuploadify一時フォルダーからファイルにアクセスして、それに応じた対応。

于 2012-12-20T10:19:02.117 に答える
0

これを行う 1 つの方法は、フォームにファイルのアップロードがあることを発見した場合、フォーム全体とともにページ上に非表示の iframe を作成し、iframe でフォームを送信することです。また、「ロード」イベントのリスナーをiframeに追加する必要があるため、送信が返されたときに応答を処理できます。これが EXT がそのような状況を処理する方法です。

于 2012-12-25T10:07:34.710 に答える