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

2019-07-21 18:54发布

我使用的是非常不错的jQuery插件blueimp / jQuery的文件上传

$('#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.pngtrutruc (2).pdf


更新2

我使用的是出厂默认的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 /文件。 (确保PHP /文件目录中有服务器写权限。)看到: 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); }} 

你应该看萤火虫的数据对象。 这个对象封装的大部分信息。



Answer 7:

如果找你使用基本-插件在asmentioned 单证您需要将数据传递给函数的属性来完成。 更改此设置:

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 - get list of uploaded files