9

我正在使用非常好的 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 脚本

4

10 回答 10

9

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

请参阅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.
});
于 2013-03-16T11:29:45.387 回答
8

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

    var files = new Array();
    $("#fileupload td p.name a").each(function() {
        var name = $(this).attr("href");
        files.push(name);
    });
    alert(files.join('\n'));
于 2013-12-22T00:28:40.137 回答
2

你也可以试试这个

 $('#fileupload').bind('fileuploadcompleted', function (e, data) {
     var filess= data.result.files[0];
        var filenam = filess.name;
       alert(filenam);
});
于 2016-01-02T06:07:39.547 回答
1

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

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

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

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

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

于 2013-06-21T20:56:41.400 回答
1

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

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

于 2013-07-08T18:26:55.497 回答
1

好吧，这是一个相当老的帖子，但这对我来说效果很好，所以我想发布它。

  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 中观察数据对象。这个对象封装了大部分信息。

于 2015-04-30T20:10:29.017 回答
0

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

stop: function (e) {

对此：

done: function (e, data) {

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

于 2013-03-16T11:26:28.253 回答
0

尝试使用 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+'"/>');
}
});
于 2013-03-16T11:37:28.407 回答
0

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

$('#fileupload').bind('fileuploadfinished', function (e, data) {
   console.log(data.originalFiles);
});
于 2014-05-05T13:28:54.477 回答
0 
 // 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]);   
                });
于 2014-09-16T10:56:08.347 回答