[ajax] upload di file senza reload della pagina

ciao a tutti! dopo un anno e più di assenza torno sul forum con un problema: sto creando uno script basato su ajax che permetta l'upload multiplo di file senza ricaricare la pagina.

la pagina carica.html avrebbe al suo interno qualcosa di simile:

Codice HTML:

<div id="bigDiv"> <div id="div_0"> <form name="form_0" blablabla> <input type="file" name="uploadFile" blabla /> </form> </div> <div id="div_1"> <form name="form_1" blablabla> <input type="file" name="uploadFile" blabla /> </form> </div>  </div>

la parte javascript interessante, invece, sarebbe qualcosa del genere:

Codice:

function ajaxCompletedUpload ( ) { // Una volta recuperato l'output, agisce di conseguenza. if (XmlHttpObject.readyState == 4) { var r = (XmlHttpObject.responseText).split("|"); // Recupera l'output. var id = r[0]; // Id del file corrente. var ok = r[1]; // Risultato dell'operazione. var fn = r[2]; // Nome del file corrente. if (ok == "true") updateDiv(id, "okUpload", "Il file <b>" + fn + "</b> è stato caricato correttamente."); // Upload corretto. else updateDiv(id, "errUpload", "Errore durante il caricamento del file <b>" + fn + "</b>. Riprovare in un secondo momento."); // Problemi. } } function ajaxStartUpload ( id ) { // questa è la parte incriminata, nel senso che non so come fare.. xmlHttp = ajaxXmlHttpObject(); if (xmlHttp == null) { window.alert("Error: your browser does not support our AJAX libraries.\nPlease update your browser."); xmlHttp = false; } xmlHttp.onreadystatechange = ajaxCompletedUpload(); xmlHttp.open("POST", "upload.php?act=ajax", true); xmlHttp.send(null); }

(la parte problematica è in grassetto sottolineato)

ora: la funzione updateDiv(..) scrive un messaggio dentro al div corrispondente al file appena caricato, e lo assegna ad una diversa classe del css, mentre la funzione ajaxXmlHttpObject() è quella che assegna as xmlHttp un oggetto new XMLHttpRequest() a seconda del browser dell'utente..

il problema vero e proprio nasce con la funzione ajaxStartUpload: in pratica non so come far inviare il file e le variabili con un metodo post. se si trattasse di non inviare nessun file, opterei per qualcosa del tipo:

Codice:

xmlHttp.open("GET", "nonso.php?varabile=" + variabile, true);

spero di essermi riuscito ad esprimere in un linguaggio intelleggibile.. :lol:

Stesso problema che incontrai io, fortunatamente "giocando" ho risolto:

Codice PHP:

xmlHttp.open("POST", "upload.php?act=ajax", true); var var_di_esempio = document.nome_form.nome_campo.value; var ciao = Math.Random(); var dati = "variabile="+var_di_esempio+"&variabile2="+ciao; xmlHttp.send(dati);

Sembrerebbe un invio GET invece è un invio POST :wink:

ho seguito le indicazioni di miki92 e ho elaborato il seguente listato (ma come parlo?):

form.html:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form di caricamento</title> <script type="text/javascript" language="javascript" src="script.js"></script> </head> <body> <form name="uploads" enctype="multipart/form-data"> <div id="bigDiv"> <span id="inpt[0]"><label for="f[0]">File da caricare:</label> <input type="file" name="f[0]" /> <label for="d[0]">Categoria:</label> <select name="d[0]"><option value="1" selected>Test</option></select></span><br /> </div> <input type="button" name="carica" value="Carica" onclick="ajaxStartUpload(document.uploads, 0);" /> <input type="button" name="aggiungi" value="Aggiungi un altro file" onclick="addSlot('bigDiv')" /> </form> </body> </html>

script.js:

Codice:

/* VARIABILI GLOBALI */ var nowUploadFile = 0; var lastUsedSlot = 0; var folders = '<option value="1" selected>Test</option>'; /* FUNZIONI OUTPUT */ function updateDiv ( divId, divClass, divText ) { // Aggiorna il contenuto e la classe CSS dell'oggetto chiamato "inpt[" + divId + "]" // codice.. } function addSlot ( id ) { // Aggiunge un altro slot per caricare files.. // codice.. } /* FUNZIONI AJAX */ function ajaxXmlHttpObject ( ) { // Inizializzazione delle librerie AJAX. // codice.. } function ajaxCompletedUpload ( XmlHttpObject, id, form ) { // Una volta recuperato l'output, agisce di conseguenza, e da' indicazioni per avviare l'upload del file successivo. if (XmlHttpObject.readyState == 4) { var r = (XmlHttpObject.responseText).split("|"); // Recupera l'output. var ok = r[0]; // Risultato dell'operazione. var fn = r[1]; // Nome del file corrente. if (ok == "true") updateDiv(id, "okUpload", "Il file <b>" + fn + "</b> è stato caricato correttamente."); // Upload corretto. else updateDiv(id, "errUpload", "Errore durante il caricamento del file <b>" + fn + "</b>. Riprovare in un secondo momento."); // Problemi. nowUploadFile++; if (nowUploadFile <= lastUsedSlot) ajaxStartUpload(form, nowUploadFile); } } function ajaxStartUpload ( form, id ) { // Fa partire l'upload del file. xmlHttp = ajaxXmlHttpObject(); if (xmlHttp == null) { window.alert("Error: your browser does not support our AJAX libraries.\nPlease update your browser."); xmlHttp = false; } xmlHttp.onreadystatechange = ajaxCompletedUpload(xmlHttp, id, form); xmlHttp.open("POST", "upload.php?act=ajax", true); var dati = "MAX_FILE_SIZE=30000&nowDir=" + form.d[id].value + "&nowFile=" + form.f[id].value; xmlHttp.send(dati); }

il tutto non funziona, perché mi dice che si verifica un errore elaborando il metodo ajaxStartUpload(), in quanto non riesce a trovare un oggetto chiamato form.d.. form, però, è una variabile, che dovrebbe puntare all'oggetto document.uploads, e l'oggetto document.uploads.d[qualcosa] esiste eccome..! qual è il problema?