How to I preload existing files and display them in the blueimp upload table?

问题

I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.

Thanks!

回答1:

I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.

The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.

Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :

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

then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:

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

回答2:

Or without an ajax call:

Prepare array containing details of existing files, e.g:

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"
    }
];

Call done callback

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

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

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

回答3:

Found the code in the main js file... It wasn't obvious how it worked. Got it working just fine.

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

回答4:

If any of you looking at this is doing it in .NET, find this: (for me it is in application.js

For a fairly recent version, there is a function

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

Inside the application.js I'm doing it for .NET though, and actually needed this gone.

Then set your somethingelse to either your files or "" depending on what you want to show. If you remove the line files = somethingelse then it will preload all files from the folder.

来源：https://stackoverflow.com/questions/15028664/how-to-i-preload-existing-files-and-display-them-in-the-blueimp-upload-table

标签

upload

blueimp