jQuery fileupload - 獲取上傳文件的列表

Question

我正在使用非常好的jquery插件blueimp / jQuery-File-Upload

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

而且我無法做一些非常簡單的事情：獲取上傳文件的列表
（在服務器上顯示他們的名字）

首先，我天真地雖然它將存儲在文件輸入，所以我可以得到列表

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

但事實並非如此，所以我對此感到滿意

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

我無法從文檔中找到方法

有人能告訴我如何在服務器中獲取上傳文件名列表嗎？

---

更新

我想在服務器上獲取上傳的文件名，以便以后能夠管理它們。

例如：

• 我上傳了一個名為trutruc.pdf的文件
• 我上傳了test.png
• 我重新上傳一個名為trutruc.pdf的文件
• 我刪除了第一個文件

然后，服務器中的當前文件列表應為test.png ， trutruc (2).pdf

---

更新2

我正在使用fileUpload 附帶的默認php腳本

Answer 1

當您實例化默認插件時，有一個代碼部分正在檢索所有以前上傳的文件（假設您沒有更改服務器代碼）：

請參閱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.
});

Answer 2

我使用UI版本。 這是從文件表中獲取服務器鏈接並填充數組的腳本：

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

Answer 3

你也可以試試這個

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

Answer 4

我有同樣的問題，經過幾個小時和幾十個文件上傳后，我想我有你需要的答案：

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

如您所見，您將在parsedresponse.files[i].url （ 我是上傳文件的從0開始的索引）中找到上傳的文件名。

好的...它是上傳文件的URL，但您將能夠提取最終文件名...

希望能幫助到你。 （這在文檔中沒有任何地方，我設法通過檢查Firebug控制台輸出來獲得此解決方案）

Answer 5

為了從服務器獲取上傳的文件名列表，需要服務器端代碼：

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. 編寫第二個函數來執行查詢
4. 調用第二個函數

請參閱： https ： //github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

Answer 6

嗯，這是一個相當古老的帖子，但這對我來說非常有效，所以我想發布它。

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中觀察數據對象。 該對象封裝了大部分信息。

Answer 7

如果您使用文檔中提到的basic-plugin，則需要將數據傳遞給done屬性中的函數。 改變這個：

stop: function (e) {

對此：

done: function (e, data) {

我不知道如果你從其中一個文檔頁面獲取它，那么我認為同樣適用於這里你不能使用數據，如果它不可用。
希望這有幫助

Answer 8

嘗試使用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+'"/>');
}
});

Answer 9

在上傳完成后獲取文件列表：

$('#fileupload').bind('fileuploadfinished', function (e, data) {
   console.log(data.originalFiles);
});

Answer 10

 // 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]);   
                });