web-dev-qa-db-ja.com

jQuery fileupload-アップロードされたファイルのリストを取得する

私は非常に優れたjqueryプラグインを使用しています blueimp/jQuery-File-Upload

_$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
});
_

そして、私は非常に簡単なことをすることができません：アップロードされたファイルのリストを取得します
（サーバー上での名前付き）

最初に私は単純に私はそれがファイル入力に保存されるので私はリストを得ることができました

_$('#fileupload').val();
_

でもそうではないので

_$('#fileupload').fileupload('getfiles');
_

私はドキュメントから方法を見つけることができません

誰かがサーバーにアップロードされたファイル名のリストを取得する方法を教えてもらえますか？

更新

アップロードしたファイルの名前をserverで取得して、後で管理できるようにしたいと思います。

例えば：

  • _trutruc.pdf_という名前のファイルをアップロードします
  • _test.png_をアップロードします
  • _trutruc.pdf_という名前のファイルを再アップロードします
  • 最初のファイルを削除します

サーバー内のファイルの現在のリストは_test.png_、trutruc (2).pdfになります。

更新2

私は 出荷されたデフォルトのphpスクリプト をfileUploadとともに使用しています

javascriptjqueryfile-uploadjquery-file-upload
9
Pierre de LESPINAY

デフォルトのプラグインをインスタンス化すると、以前にアップロードされたすべてのファイルを取得するコード部分があります（サーバーコードを変更していない場合）。

main.jsファイル70行目：

    // Load existing files:
    $.ajax({
    // Uncomment the following to send cross-domain cookies:
    //xhrFields: {withCredentials: true},
    url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, null, {result: result});
    });

コードをさらに詳しく見ると、テンプレートで埋められるテーブルがあります。

<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

ファイルをロードした後、そのテーブルからそれぞれを簡単に解析できます。

$('tbody.files tr').each(function(i, e) {
    //according to @Brandon's comment it's now p.name
    var name = $(e).find('td.name').text(); 
    var size = $(e).find('td.size').text();
    //etc.
});
9
soyuka

UI版を使用しています。次のスクリプトは、ファイルのテーブルからサーバーリンクを取得し、配列に入力します。

    var files = new Array();
    $("#fileupload td p.name a").each(function() {
        var name = $(this).attr("href");
        files.Push(name);
    });
    alert(files.join('\n'));
9
Eugene Mala

あなたもこれを試すことができます

 $('#fileupload').bind('fileuploadcompleted', function (e, data) {
     var filess= data.result.files[0];
        var filenam = filess.name;
       alert(filenam);
});
2
Harpreet Kaur

私は同じ問題を抱えていて、数時間と数十のファイルのアップロードの後、私はあなたが必要とする答えを持っていると思います：

done: function (e, data) {
    response = data.response();
    parsedresponse = $.parseJSON(response.result);
    console.log(parsedresponse.files);
}

ご覧のとおり、アップロードされたファイルの名前はparsedresponse.files[i].urlにあります（iは、アップロードされたファイルの0から始まるインデックスです）。

OK ...アップロードされたファイルのURLですが、最終的なファイル名を抽出することができます...

それが役に立てば幸い。 （これはドキュメントのどこにもありません。Firebugコンソールの出力を確認することで、このソリューションにたどり着きました）

1
Alexandre Paulo

serverからアップロードされたファイル名のリストを取得するには、サーバー側のコードが必要です。

UploadHandler.phpは、サーバー上のディレクトリにファイルをアップロードするために使用されます。

プラグインアーカイブをダウンロードしてサーバーに抽出した場合、ファイルはデフォルトでphp/filesに保存されます。 （php/filesディレクトリにサーバーの書き込み権限があることを確認してください。）参照： https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

UploadHandler.phpはまさにアップロードハンドラです。サーバーに接続せずにサーバーファイルにアクセスすることはできません。

JavaScriptはサーバー上のファイルにアクセスできないため、アクセスするにはphpスクリプトが必要です。 （JavaScriptは、アップロード、名前変更、削除されたすべてのものを追跡できる可能性がありますが。）

UploadHandler.phpを変更してデータベースに接続し、アップロード時にファイルパス（およびその他のデータ）をファイルテーブルに書き込むことができます。次に、標準SQLクエリを介してファイルにアクセスできます。

変更UploadHandler.php：

  1. データベース接続パラメーターを追加する
  2. SQLクエリ関数を作成する
  3. クエリを実行する2番目の関数を作成する
  4. 2番目の関数を呼び出す

参照してください： https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

1
DavidS

まあ、これはかなり古い投稿ですが、これは私にとって非常にうまくいったものなので、投稿しようと思いました。

  1. イベントをFileUploaderにバインドします（私はmain.jsで行いました）。

        $('#fileupload').bind('fileuploaddone', function (e, data) {
        FileUploadDone(e, data);
    });

  2. HTMLファイルで、次のコードを使用してファイル名を取得します。

    function FileUploadDone(e, data) {
for (x in data._response.result.files){
    if (data._response.result.files[x].error == "")
        alert(data._response.result.files[x].name);
    else
        alert(data._response.result.files[x].error);
}}

Firebugでデータオブジェクトを監視する必要があります。このオブジェクトは、ほとんどの情報をカプセル化します。

1
Jiten

documentations で説明されているようにbasic-pluginを使用している場合は、データを関数にdone属性で渡す必要があります。これを変える：

stop: function (e) {

これに：

done: function (e, data) {

ドキュメンテーションページの1つから停止を取得した場合、停止についてはわかりません。ここで同じことを適用しても、データが利用できない場合はデータを操作できないと思います。
この助けを願っています

0
Yahya KACEM

アップロード完了時にファイルリストを取得するには：

$('#fileupload').bind('fileuploadfinished', function (e, data) {
   console.log(data.originalFiles);
});
0
Shashank Kumar
 // Initialize the jQuery File Upload widget:
                $('#edit-product').fileupload({
                    // Uncomment the following to send cross-domain cookies:
                    //xhrFields: {withCredentials: true},
                    disableImageResize: false,
                    autoUpload:false,
                    url: 'YOURURL'
                }).bind('fileuploaddone', function (e, data) {
                    console.log(data.result.files[0]);   
                });
0
Ammar Jabakji

doneメソッドを使用して、非表示の入力に名前を入力してから、それらを選択してください：

$('#fileupload').fileupload({
  autoUpload: true
, filesContainer: '#attachments_presentation tbody'
, stop: function (e) {
    console.log(data);
  }
, done: function(e,data){
            var filess= data.files[0];
            var filenam = filess.name;
            data.context.text(filenam+' uploaded successfully.');
            $('#formId').append('<input type="hidden" name="fileName" value="'+filenam+'"/>');
}
});
0
Mohamed Ali