如何预加载现有文件并将它们显示在 blueimp 上传表中？答案

【问题标题】：How to I preload existing files and display them in the blueimp upload table?如何预加载现有文件并将它们显示在 blueimp 上传表中？
【发布时间】：2013-02-08 08:03:14
【问题描述】：

我正在使用 Blueimp 上传的 jquery-ui 版本，我喜欢如何格式化表格并显示刚刚上传的文件。但我也想将它用作文件管理器，所以我想预加载现有文件并显示，而不是像它们刚刚上传一样。我怎样才能做到这一点？指向其他人已解决此问题的示例链接就足够了。顺便说一句，我正在上传几种不同的文件类型，而不仅仅是图像。

谢谢！

【问题讨论】：

标签： upload blueimp

【解决方案1】：

在主 js 文件中找到了代码......它是如何工作的并不明显。让它工作得很好。

// Load existing files:
$.ajax({
    url: $('#fileupload').fileupload('option', 'url'),
    dataType: 'json',
    context: $('#fileupload')[0]
}).done(function (result) {
    $(this).fileupload('option', 'done').call(this, null, {result: result});
});

【讨论】：

你能解释一下你是怎么做到的吗？可以通过 url 变量来完成吗？像 php?foldername=customfolder
我完全忘记了。 :) 我现在以不同的方式使用代码，所以这不是当前的问题。我相信上面的调用可以做到，其中 ajax url 的 url 实际上是一个 jquery 选择器，它属于 fileupload。

【解决方案2】：

我也遇到了同样的问题。它的工作原理并不神奇。我建议检查 UploadHandler.php 文件。然后你就可以根据你的需要修改这个插件了。

您第二篇文章中的上述代码只是对上传器脚本的 ajax 调用（默认情况下 index.php 在 server/php/ 文件夹中）。 $.ajax 对象中的调用方法默认设置为“get”。

打开 UploadHandler.php 文件并转到类方法“initialize(...)”。您将看到如何处理带有“get”的调用。 UploadHandler 调用类方法 this->get(.:.) 来准备和发送现有文件的列表。如果您使用其他上传目录，则需要将参数传递给 UploadHänder。只需更改 $.ajax 对象中的 url 属性，例如：

url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,

那么你应该在创建一个新的 UploadHandler 对象之前初始化 UploadHandler 的 option 属性，如下所示：

$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link

$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);

$upload_handler = new UploadHandler($options);

【讨论】：

@Selim 我在执行此操作时遇到问题，由于您的回答已过时，我想请您查看您的回答并通知我/我们这是否仍与最新版本相关?另外，我有兴趣在这里分享任何线索吗？ stackoverflow.com/questions/56090215/…

【解决方案3】：

或者没有 ajax 调用：

准备包含现有文件详细信息的数组，例如：

var files = [
    {
        "name":"fileName.jpg",
        "size":775702,
        "type":"image/jpeg",
        "url":"http://mydomain.com/files/fileName.jpg",
        "deleteUrl":"http://mydomain.com/files/fileName.jpg",
        "deleteType":"DELETE"
    },
    {
        "name":"file2.jpg",
        "size":68222,
        "type":"image/jpeg",
        "url":"http://mydomain.com/files/file2.jpg",
        "deleteUrl":"http://mydomain.com/files/file2.jpg",
        "deleteType":"DELETE"
    }
];

调用完成回调

var $form = $('#fileupload');        

// Init fileuploader if not initialized
// $form.fileupload();

$form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});

【讨论】：

另一个可以添加到文件数组的属性是thumbnailUrl，它包含要显示的存储图像的缩略图预览的路径
对此不确定，您不希望这些文件在页面加载时而不是在文件上传时预加载吗？这对我来说更有意义。
无视我之前所说的！这就像一个魅力。我唯一不完全理解的是 deleteURL ......谁能解释一下？
为了将来的参考，请注意您的文件[]可能看起来不同。在 fileupload-ui.js 中提醒对象 done: 函数以确定它的结构。
非常直观的设置文件数组的方法。看来作者已经决定取笑用户了。一个简单的$(form).fileupload({ files: files }); 肯定会更有意义。无论如何，感谢您的工作技巧，很难找到一个琐碎问题的有效答案。

【解决方案4】：

如果你看到这个是在 .NET 中做的，找到这个：（对我来说它在 application.js 中

对于一个相当新的版本，有一个功能

    // Load existing files:
$.getJSON($('#fileupload form').prop('action'), function(files) {

files = somethingelse;

    var fu = $('#fileupload').data('fileupload');
    fu._adjustMaxNumberOfFiles(-files.length);
    fu._renderDownload(files)
        .appendTo($('#fileupload .files'))

        .fadeIn(function() {
            // Fix for IE7 and lower:
            $(this).show();
        });
});

在 application.js 内部不过，我是为 .NET 做的，实际上需要它。

然后根据您要显示的内容将您的其他内容设置为您的文件或“”。如果您删除行 files = somethingelse 那么它将预加载文件夹中的所有文件。

【讨论】：