in Code & IT

FileUpload, iframes, e actualização de listas.

Andei à procura de uma solução para um problema de envio de ficheiros, e não estava a encontrar nas pesquisas uma solução válida, dentro do contexto que estava a desenvolver. Felizmente lembrei-me duma que resultou e que vou descrever. E até é bastante simples! lol…

Então o contexto. Tenho uma página complexa (tem imensos blocos de funcionalidade ortogonais). Um das secções / blocos representa um conjunto de documentos associados a uma entidade. A funcionalidade da página está bastante dependente de AJAX para evitar carregamentos de página e ter uma interface mais fluída. Porque o bloco de adição dos documentos requer um upload, queria que o upload também fosse efectuado sem refresh da página.

Aparentemente, não é possível fazer o envio directamente com uma chamada a um método por AJAX. A solução então passa por usar um iframe na página, e o conteúdo desse iframe ser um novo formulário de envio. Segui esse caminho – implementei o iframe e criei a página de upload (o formulário tem um control de Fileupload, uma DropDownList, e um botão de envio). Neste caso, a funcionalidade de upload está contido neste formulário e este é o único responsável pelo upload. e funciona correctamente como esperado. O postback é contido no formulário do iframe e apenas nesse ponto é que há refresh. E é aceitável.

O problema que surge agora é que na página original, tenho a lista de documentos associados à entidade, e necessito de actualizar essa lista com o novo documento associado. A minha lista de documentos é carregada por chamadas AJAX, usando os métodos de templates javascript que mencionei no penúltimo post e portanto bastaria chamar novamente a função que preenche a lista para conseguir actualiza-la. Procurei então um método de comunicação entre frames, para que o a acção de click do botão ou do refresh da página actuasse sobre a página pai. Má ou impossível solução. No entanto, no meio disto, lembrei-me – “bem, se cada vez q é feito um upload, há um postback e a página do iframe é recarregada, será que dá para simplesmente apanhar o evento de ‘load’ do iframe?”. E a verdade é que sim, sempre que a página do iframe é carregado, o load do iframe dispara. Assim, fiquei com :

$(document).ready(function() {
      $('#docuploadframe').bind('load', function() { LoadDocList(); });
 });

Conclusão: em cada upload de documento, o load do iframe é disparado (após upload, ou mesmo erro), e então recarrego a lista de documentos após esse evento, via AJAX. Simples!

Write a Comment

Comment

 

This blog is kept spam free by WP-SpamFree.

  1. Não sei se me consegues ajudar, mas estou a usar o “Max’s AJAX file uploader” e juntamente na mesma pagina estou a carregar a lista com os ficheiros. Gostava que depois de efectuar o upload consegui-se fazer o refresh na parte onde tenho o codigo para listar os ficheiros. Segue o codigo:

    codigo ficheiro index.php

    <!–
    function startUpload(){
    document.getElementById('f1_upload_process').style.visibility = 'visible';
    document.getElementById('f1_upload_form').style.visibility = 'hidden';
    return true;
    }

    function stopUpload(success){
    var result = '';
    if (success == 1){
    result = 'Upload do ficheiro com Sucesso!’;
    }
    else {
    result = ‘Erro durante o upload do ficheiro!’;
    }
    document.getElementById(‘f1_upload_process’).style.visibility = ‘hidden’;
    document.getElementById(‘f1_upload_form’).innerHTML = result + ‘File: ‘;
    document.getElementById(‘f1_upload_form’).style.visibility = ‘visible’;
    return true;
    }
    //–>

    A Carregar…
    Upload dos Horários dos Cursos
    Ficheiro:

    <?php

    //listar os ficheiros

    $path = "/home/webmaster/documentacao/";

    $dir_handle = @opendir($path) or die("Erro ao abrir a pasta");
    //echo "Lista de Ficheiros existentes no Servidor”;
    while($file = readdir($dir_handle)) {
    if(is_dir($file)) {
    continue;
    }
    else if($file != ‘.’ && $file != ‘..’ && substr(strrchr($file, “.”), 1) == ‘pdf’ )
    {
    sort($file);
    echo ” $file“;
    }
    }
    closedir($dir_handle);
    ?>

    codigo ficheiro upload.php

    window.top.window.stopUpload();

    Obrigado.