[ajax] upload di file senza reload della pagina

08-03-2009, 10.49.09

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>
    <!-- e poi di seguito finché mi va.. -->
</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> &egrave; 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..

**miki92** · 08-03-2009, 11.13.10

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

08-03-2009, 15.53.42

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> &egrave; 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?

Discussione: [ajax] upload di file senza reload della pagina

LinkBack

Strumenti discussione

Display

[ajax] upload di file senza reload della pagina

Regole di scrittura