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

我正在使用default php script shipped和fileUpload

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

你也可以试试这个

Obsolete

Answer 4

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

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

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

好的...它是上传文件的网址，但您可以提取最终文件名......

希望它有所帮助。（这在文档中没有任何地方，我设法通过检查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 ：

添加数据库连接参数
编写SQL查询函数
编写第二个函数来执行查询
调用第二个函数

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

Answer 6

这是一个相当古老的帖子，但这对我来说非常有用，所以我想发布它。

将事件绑定到FileUploader（我在main.js中完成）：

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

在您的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

如果您使用documentations中提到的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]);   
                });

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

10 个答案:

修改 UploadHandler.php ：