1

重複の可能性:
JQuery 内の AJAX を介したファイルのアップロード
フォームを送信せずにファイルを簡単にアップロードする方法 (jQuery + AJAX を使用)

フォームを使用してファイルをアップロードできることは知っていますenctype="multipart/form-data"が、理解しようとしているのは、Jquery Ajaxを使用してファイルをアップロードすることです..

任意のヒント??前もって感謝します。

4

5 に答える 5

0

このjQueryプラグインを試してくださいhttp://valums.com/ajax-upload/

次に、このJavaScriptコードを使用します

var uploader = new qq.FileUploader({
   // pass the element
   element: $(selector)[0],
   // path to server-side upload script
   action: '/server/upload'
});

詳細については、ドキュメントを確認してください

于 2012-05-31T16:13:23.210 に答える
0

FormData オブジェクトを使用する必要がありますが、これは新しいブラウザーでのみ機能します。

if (window.FormData) {
    $('input[type=file]').change(function() {
        var formdata = new FormData();
        var file = this.files[0];
        formdata.append("files[]", file);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
        });
    });
}

詳細情報: https://developer.mozilla.org/en/XMLHttpRequest/FormData

HTML の例といくつかの追加機能を含む lib も参照できます: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

古いブラウザーをサポートするために、iframe を作成し、ファイル入力要素を iframe に複製して、そこにフォームを送信できます。この方法では、ページは更新されず、AJAX のようなものになります。

于 2012-05-31T16:36:29.220 に答える
0

上記のプラグインはすべて便利ですが、プロセスの背後にあるロジックを知りたい場合は、次のようになります。

  1. ファイルのアップロードを処理し、エラーを返す可能性のある php ファイルを作成します ( echo)。
  2. フォームとすべてを含む HTML ページを作成する
  3. jquery 関数を作成して、次のことを行います。
    • フォームが送信されないようにする
    • 最初のステップで作成した php ファイルへの ajax リクエストを作成します
    • div 内の php ファイルからの結果を表示します。
于 2012-05-31T16:21:59.027 に答える
0

過去にhttp://blueimp.github.com/jQuery-File-Upload/を使用したことがありますが、優れたデモとドキュメントが用意されています。

https://github.com/blueimp/jQuery-File-Uploadで確認してください

于 2012-05-31T16:15:41.327 に答える
0

あなたのニーズに依存します。

単一ファイルの場合、 http: //valums.com/ajax-upload/で十分です

multiplaファイルのアップロード + 複数ファイルの選択には、flash や html5 などの他のテクノロジーが必要です。pluploadまたはUploadifyを確認できます。

plupload は、flash、html5、silvernight html4 のアップロード方法をサポートしています。複数ファイルの選択もサポート (html4 を除く)

uploadify は、複数のファイルを選択するためのフラッシュと html5 をサポートします

于 2012-05-31T16:19:24.023 に答える