web-dev-qa-db-ja.com

blueimp jquery-fileuploadによる非同期での複数のファイルのアップロード

私はjQueryファイルアップロードライブラリ（ http://github.com/blueimp/jQuery-File-Upload ）を使用していますが、次の条件を満たすライブラリの使用方法がわからなくなりました。

  • ページには、フォームタグで囲まれた複数のファイル入力フィールドがあります。
  • ユーザーは各入力フィールドに複数のファイルを添付できます
  • ファイルが入力フィールドに添付されているときではなく、ボタンがクリックされたときにすべてのファイルがサーバーに送信されます。
  • アップロードは非同期で行われます
  • ページに3つの入力フィールドがあり、名前属性が「file1 []」、「file2 []」、「file3 []」の場合、リクエストのペイロードは{file1：[file1のファイルの配列]、file2のようになります。 ：[file2 []上のファイルの配列]、...}

これがjsFiddleです。投稿リクエストを2回送信し、最初のリクエストがキャンセルされるという点で、これは奇妙な動作をしています。

アップデート

@CBroeのコメントのおかげで、リクエストが2回送信される問題が修正されました。ただし、リクエストパラメータのキーが正しく設定されていません。ここに更新されたjsFiddleがあります。

http://jsfiddle.net/BAQtG/27/

Jsコードのコア部分は次のようになります。

$(document).ready(function(){
    var filesList = []
    var elem = $("form")
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.Push(data.files[0])
    });

    $("button").click(function(){
        file_upload.fileupload('send', {files:filesList} )
    })

})

これを機能させる方法を誰かが知っていますか？

javascriptjqueryfile-uploadjquery-file-uploadform-data
13
Ryo

解決しました。

フィドル： http://jsfiddle.net/BAQtG/29/

そしてjsコード

$(document).ready(function(){
    var filesList = [],
        paramNames = [],
        elem = $("form");
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.Push(data.files[0]);
        paramNames.Push(e.delegatedEvent.target.name);
    });

    $("button").click(function(e){
        e.preventDefault();
        file_upload.fileupload('send', {files:filesList, paramName: paramNames});
    })
})
16
Ryo

以下に示すように、return false;を追加する必要があります。

$("button").click(function(){
    file_upload.fileupload('send', {files:filesList} )
    return false;
})

または、type="button"属性を指定します。

<button type="button">send by fileupload send api</button>

formDataを設定するには、以下を使用します。

$("button").click(function () {
    file_upload.fileupload('send', {
        files: filesList,
        formData: {
            json: JSON.encode({
                extra: 1
            })
        }
    })
})

特にJSFiddleの場合、応答でextra値を取得するには、それをエンコードしてプロパティに割り当てる必要がありますjsonという名前です。

ここ は実用的な例です。

1
Alex Filipovici

ボタン送信フォーム（2番目のPOSTリクエストの原因）であるため、スクリプトによってトリガーされた最初のPOSTリクエストはキャンセルされます。

使用する type="button"buttonに送信しない場合は、送信機能を必要とします。

1
CBroe