5

jQuery File Uploadに関しては、私が理解しているように、各ファイルの進行状況を報告するオブジェクトprogressを返すイベントがあります。data

イベントを介してファイルと進行状況バーを UI に追加しています。add()後でイベント内のそれぞれの進行状況バーを更新したいと考えていprogress()ます。私が抱えている問題は、それらをどのように一致させるかです。

各ファイルに一意の ID を付けてペアリングできるようにする必要がありますが、私が確認した限りでは提供されていません。これをどのように行うべきですか？

おそらく、各 File オブジェクトに JavaScript ハッシュコードがいくつかありますか?

いくつかのコード:

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            console.log(file);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        console.log(data);
    }
});

次のように利用することで、各ファイルに一意の ID を付けることができると思います$.data。

var fileId = 0;

$('#fileupload').fileupload({
    url: 'api/combox_upload.php',
    dataType: 'json',
    dropZone: $dropZone,
    done: function (e, data) {
        $.each(data.result, function(index, file) {
            // indicate completeness
        });
    },
    add: function(e, data) {
        $.each(data.files, function(index, file) {
            //console.log(file);
            console.log(filename, fileId);
            $.data(file, 'id', fileId++);
            $file_uploads.append($('<li>').text(file.name));
        });
        data.submit(); // start upload immediately
    },
    progress: function(e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $.each(data.files, function(index, file) {
            console.log($.data(file,'id'), file.name, progress);
        });
        //console.log(data);
    }
});

私が今混乱している部分は、進行状況イベントでは、単一のファイルを提供するだけでなく、1つのファイルを保持する配列を提供することです...それが常にあることが保証されているかどうかはわかりませんそこに正確に1つのファイル（data.files）があるかどうか。

4

2 に答える 2

4

アップロードのライフサイクル中にファイルを要素ノードに結び付ける方法というセクションを読む必要があります。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});
于 2012-12-28T00:45:16.227 に答える
3

実際にファイルのアップロードを呼び出したり、進行状況イベントにバインドしたりするコードは投稿しませんでしたが$.proxy、関数の周りにラッパーを配置するだけでよいと思いfileuploadprogressます。

関数を使用すると、関数内で何を参照$.proxyするかを指定できます。this次に、関数内でコンテキストにアクセスしdataてthis提供できるようになります。

于 2012-12-27T21:13:36.153 に答える