Ajax - Javascript - Upload múltipla
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>
Assine nossa newsletter!
