jQuery fileupload - 获取上传文件的列表

jQuery fileupload - get list of uploaded files

提问by Pierre de LESPINAY

I'm using the very good jquery plugin blueimp / jQuery-File-Upload

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

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

And I'm not able to do something very simple: get the list of uploaded files
(with their name on the server)

而且我无法做一些非常简单的事情：获取上传文件的列表
（在服务器上带有它们的名称）

Firstly I naively though it would be stored on the file input so I could get the list with

首先，我天真地认为它会存储在文件输入中，因此我可以使用

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

But it's not, so I though about something like

但事实并非如此，所以我想像

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

I can't find the way from the docs

我无法从文档中找到方法

Can somebody tell me how I can get the list of uploaded file names in the server ?

有人可以告诉我如何获取服务器中上传文件名的列表吗？

---

---

Update

更新

I'd like to get the uploaded files name on the serverin order to be able to manage them afterwards.

我想在服务器上获取上传的文件名，以便以后能够管理它们。

For example:

例如：

• I upload a file named trutruc.pdf
• I upload test.png
• I re-upload a file named trutruc.pdf
• I delete the first file

• 我上传了一个名为 trutruc.pdf
• 我上传 test.png
• 我重新上传了一个名为 trutruc.pdf
• 我删除第一个文件

The current list of files in the server should then be test.png, trutruc (2).pdf

服务器中的当前文件列表应该是test.png，trutruc (2).pdf

---

---

Update 2

更新 2

I'm using the default php script shippedwith fileUpload

我正在使用fileUpload附带的默认 php 脚本

采纳答案by soyuka

When you instantiate the default plugin, there is a code portion which is retrieving all the previous uploaded files (assuming you haven't changed the server code) :

当您实例化默认插件时，有一个代码部分正在检索所有以前上传的文件（假设您没有更改服务器代码）：

See on the main.jsfile line 70 :

请参阅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});
    });

Than if you look further in your code, there is a table which will be filled out with the template :

如果您在代码中进一步查看，则会有一个表格，其中将填写模板：

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

You could easily parse each from that table after loading the files :

加载文件后，您可以轻松解析该表中的每个文件：

$('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.
});

回答by Eugene Mala

I use UI version. Here is script that grabs server links from table of files and populates array:

我使用UI版本。这是从文件表中获取服务器链接并填充数组的脚本：

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

回答by Harpreet Kaur

you can also try this

你也可以试试这个

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

回答by Jiten

Well this is quite an old post, but this is something which worked very well for me so I thought to post it.

嗯，这是一个很旧的帖子，但这是一个对我来说非常有效的东西，所以我想发布它。

1. Bind the event to FileUploader (I did it in main.js):

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

2. In your html file, use the following code to get the file name:

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

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

You should watch the data object in firebug. This object encapsulates most of the information.

您应该在 firebug 中查看数据对象。该对象封装了大部分信息。

回答by Alexandre Paulo

I had the same problem and after a few hours and tens of file uploads, I think I have the answer you need:

我遇到了同样的问题，经过几个小时和数十次文件上传后，我想我有你需要的答案：

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

As you can see, you will find the uploaded files name at parsedresponse.files[i].url(iis the 0-based index of the uploaded files).

如您所见，您将在parsedresponse.files[i].url( i是上传文件的从 0 开始的索引)找到上传的文件名。

Ok... its the uploaded file's URL, but you'll be able to extract the final file name ...

好的...它是上传文件的 URL，但您将能够提取最终文件名...

Hope it helps. (this is nowhere in the documentation, I managed to get to this solution by checking the Firebug console outputs)

希望能帮助到你。（这在文档中没有任何地方，我通过检查 Firebug 控制台输出设法找到了这个解决方案）

回答by DavidS

To get the list of uploaded file names from the server, requires server-side code:

为了从上传的文件名列表服务器，需要服务器端代码：

UploadHandler.phpis used to upload files to a directory/s on your server.

UploadHandler.php用于将文件上传到您服务器上的目录。

If you've downloaded the plug-in archive and extracted it to your server, the files will be stored in php/files by default. (Ensure that the php/files directory has server write permissions.) see: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

如果您已下载插件存档并将其解压缩到您的服务器，则默认情况下这些文件将存储在 php/files 中。（确保 php/files 目录具有服务器写入权限。）请参阅：https: //github.com/blueimp/jQuery-File-Upload/wiki/Setup

UploadHandler.phpis just that, an upload handler. It does not provide access to server files without a connection to the server.

UploadHandler.php就是一个上传处理程序。在没有连接到服务器的情况下，它不提供对服务器文件的访问。

JavaScript cannot access files on the server, so you'll need a php script to do so. (Although JavaScript could possibly keep track of everything uploaded, renamed, and deleted.)

JavaScript 无法访问服务器上的文件，因此您需要一个 php 脚本来执行此操作。（尽管 JavaScript 可能会跟踪上传、重命名和删除的所有内容。）

You can modify UploadHandler.phpto connect to your database, and write the file paths (and any other data) to a files table during upload. Then you can access your files via standard SQL queries:

您可以修改UploadHandler.php以连接到您的数据库，并在上传期间将文件路径（和任何其他数据）写入文件表。然后您可以通过标准 SQL 查询访问您的文件：

Modify UploadHandler.php:

修改UploadHandler.php：

1. Add your database connection parameters
2. Write an SQL query function
3. Write a second function to perform your query
4. Call the second function

1. 添加数据库连接参数
2. 编写一个 SQL 查询函数
3. 编写第二个函数来执行查询
4. 调用第二个函数

see: https://github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

请参阅：https: //github.com/blueimp/jQuery-File-Upload/wiki/Working-with-databases

回答by Shashank Kumar

to get file list on upload finished:

在上传完成时获取文件列表：

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

回答by Ammar Jabakji

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

回答by Mohamed Ali

try use done method and put names in hidden input then select them:

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

回答by Yahya KACEM

If, you'r using the basic-plugin asmentioned in the documentationsyou need to pass the data to the function in the done attribute. change this:

如果您使用文档中提到的基本插件，您需要将数据传递给 done 属性中的函数。改变这个：

stop: function (e) {

to this:

对此：

done: function (e, data) {

I don't know about the stop if you get it from one of the documentations pages then I think the same applied here you can't work with data if its not available.
Hope this help

如果您从文档页面之一获得它，我不知道停止，然后我认为同样适用于此处，如果数据不可用，您将无法处理数据。
希望这有帮助