Menu

Ajax - Javascript - Upload múltipla

Última modificação: por pintuda.

Introdução

AJAX Upload permite que você baixe vários arquivos sem atualizar a página e usar qualquer elemento para mostrar o arquivo de janela de seleção. Ele funciona em todos os principais navegadores e, a partir da da versão 2.0, não precisa de biblioteca para ser executado. AJAX Download não polui o espaço global, e é compatível com o jQuery PrototypeJs, Mootools e outras bibliotecas JavaScript.

Criação do uploader

Em primeiro lugar, você deverá criar o botão. (Você poderá utilizar qualquer elemento).

Exemplo:

 <input id="button2" type="file">

Depois, você deverá criar uma instância upload ajax. Na sua forma mais simples, você poderá criar usando o seguinte código:

 new AjaxUpload('#button2', { 
          action: 'upload.php', 
          onSubmit : function(file , ext){ 
                  if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                          // extension is not allowed 
                          alert('Error: invalid file extension'); 
                          // cancel upload 
                          return false; 
                  } 
          } 
 });

Script servidor (upload.php)

Se você utiliza o PHP, veja um exemplo bem simples:

 $uploaddir = '/var/www/uploads/'; 
 $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); 
 if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile))  { 
    echo "success"; 
 } else { 
    // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! 
    // Otherwise onSubmit event will not be fired 
    echo "error"; 
 }

NB : Il faux ajouter les deux bibliothèques prototype http://prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js

et ajax-upload http://github.com/valums/ajax-upload/raw/master/ajaxupload.js.

Exemple de code source :


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
                <script type="text/javascript" src="./prototype.js"></script> 
                <script type="text/javascript" src="./ajaxupload.js"></script> 

    <script> 
  new AjaxUpload('#button2', { 
                action: './upload.php', 
                onChange : function(file , ext){ 
                        if (! (ext && /^(jpg|png|jpeg|gif|txt)$/.test(ext))){ 
                                // extension is not allowed 
                                alert('Error: invalid file extension'); 
                                // cancel upload 
                                return false; 
                        } 
                } 
                }); 
        </script> 
    </head> 
    <body> 
                <form action="#" method="get"> 
                <input id="button2" type="file"> 
                </form> 
    </body> 
</html>

Download dos Arquivos Múltiplos Genéricos em Ajax

Utilizando as mesmas bibliotecas, mas com outras técnicas Javascript, é possível
Fazer o upload múltiplo dos arquivos.

1- utilização do DOM Javascript para criar linhas de download.

2- Função EVAL Javascript para avaliar a instância de cada linha gerada.

Exemplo do código fonte:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <script type="text/javascript" src="./prototype.js"></script> 
        <script type="text/javascript" src="./ajaxupload.js"></script> 

    <script> 
    var count_annex = 0; 
    var champ_annex = ""; 
    var annex_suivant = 0; 
    function add_annex(id){ 
     annex_suivant = count_annex + 1; 
 var tbody = $(id).getElementsByTagName("TBODY")[0]; 
     var row = document.createElement("TR"); 
     var td1 = document.createElement("TD"); 
     td1.appendChild(document.createTextNode("column "+annex_suivant)); 
     var td2 = document.createElement("TD"); 
     td2.innerHTML = '<input type="button" value = "Percorrer" id="annexadded'+count_annex+'"/>'; 
     row.appendChild(td1); 
     row.appendChild(td2); 
     tbody.appendChild(row); 
  
 eval(new AjaxUpload('#annexadded'+count_annex, { 
  action: './upload.php', 
  onChange : function(file , ext){ 
                        if (! (ext && /^(jpg|png|jpeg|gif|txt)$/.test(ext))){ 
                                // extension is not allowed 
                                alert('Error: invalid file extension'); 
                                // cancel upload 
                                return false; 
                        } 
                 } 
  }) 
  ); 
 champ_annex = ""; 
     count_annex++; 
    } 
        </script> 
    </head> 
    <body> 
 <table id="myTable" cellspacing="0" border="1"> 
  <tbody> 
  </tbody> 
 </table> 

 <a href="javascript:add_annex('myTable')">Add row</a> 

    </body> 
</html>

Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.
Este documento, intitulado 'Ajax - Javascript - Upload múltipla', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
Utilização do objeto XMLHttpRequest
Utilização do objeto XMLHttpRequest

Assine nossa newsletter!
Assine nossa newsletter!
Junte-se à comunidade