Jak wstępnie wczytać istniejące pliki i wyświetlić je w tabeli przesyłania blueimp?

Question

Używam wersji jquery-ui do przesyłania Blueimp i podoba mi się, jak mogę sformatować tabelę i wyświetlić pliki, które właśnie zostały przesłane. Ale chciałbym też użyć go jako menedżera plików, więc chcę wstępnie wczytać istniejące pliki i wyświetlać, jak gdyby były właśnie przesłane. Jak mogę to zrobić? Wystarczyłby przykładowy link do miejsca, w którym ktoś zajął się tym problemem. BTW, przesyłam kilka różnych typów plików, nie tylko obrazy.

Dzięki!

Answer 1

Też miałem ten sam problem. To nie jest magia, jak to działa. Zalecam przejrzenie pliku UploadHandler.php. Wtedy będziesz mógł zmodyfikować tę wtyczkę zgodnie ze swoimi potrzebami.

Powyższy kod w drugim wpisie jest po prostu wywołaniem ajaxa do skryptu przesyłającego (domyślnie index.php w serwerze/php/folderze). Metoda wywołania jest domyślnie ustawiona na "get" w obiekcie $ .ajax.

Otwórz plik UploadHandler.php i przejdź do metody klasy "initialize (...)". Zobaczysz, jak wygląda połączenie z "get". UploadHandler wywołuje metodę klasy this-> get (.:.), Aby przygotować i wysłać listę istniejących plików. Jeśli korzystasz z innego katalogu przesyłania, musisz przekazać parametr do UploadHänder. Wystarczy chage właściwość URL w $ .ajax przedmiot jak:

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

następnie należy zainicjować właściwość wyboru opcji UploadHandler przed utworzeniem nowego obiektu UploadHandler takiego:

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

Answer 2

Znaleziono kod w głównym pliku js ... Nie było oczywiste, jak to działało. Działa dobrze.

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

Answer 3

lub bez ajax połączeń:

1. przygotować tablicę zawierającą szczegółowe informacje o istniejących plików, np:

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

2. zrobić oddzwonienia

   var $form = $('#fileupload');   
   
   // Init fileuploader if not initialized 
   // $form.fileupload(); 
   
   $form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}}); 
   

Answer 4

Jeśli ktoś z was patrząc na to robi to w .NET, że ta (dla mnie to w application.js

Dla dość aktualna wersja znajduje się funkcja

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

Wewnątrz application.js jestem d o to jednak dla .NET i faktycznie tego potrzebowaliśmy.

Następnie ustaw swój przedmiot na swoje pliki lub "" w zależności od tego, co chcesz pokazać. Jeśli usuniesz plik linii = coś, to wstępnie załaduje wszystkie pliki z folderu.