Ciao a tutti,
ho questa funzione che avevo recuperato da qualche guida ma non mi ricordo dove...
Praticamento ho il seguente form dove l'utente scrive un messaggio, stile facebook, e una volta fatto click sul button la input text si svuota ed il commento che ha scritto lo vede nella lista facendo un classico append.
Il tutto funziona, fino a quando non ho dovuto aggiungere la possibilità di fare un upload multiplo di file...
Di seguito vedete il codice del form e ajax, la parte in rosso è quella aggiunta per upload, senza questa parte in rosso mi scrive il commento correttamente...
codice:
<form name="formcom<?php echo $id_conv; ?>" onSubmit="javascript:xmlhttpPost('risposta.php','commento<?php echo $id_conv; ?>','formcom<?php echo $id_conv; ?>','content_comment'); return false;" enctype="multipart/form-data">
<label>Commento: <span>*</span></label>
<textarea cols="40" name="commento" rows="1" style="height:30px; min-height:20px; margin-bottom:10px;" required></textarea>
<img src="emoticons/1.gif" alt="emoticons" title="Apri emoticons" onclick="showHide('panel_emoticons')" style="display:inline">
<input type="hidden" name="id_conv" value="<?php echo $id_conv; ?>" />
<input type="submit" class="submit" style="float:right" value="Scrivi messaggio" />
<div class="clearfix"></div>
<div class="formRow" style="float:left">
<label for="file" style="float:left; margin-top:5px;">Seleziona le immagini da caricare </label>
<input type="file" id="file1" name="file" accept="image/*" multiple style="margin-top:8px;">
</div>
AJAX
codice:
<script language="Javascript">
//Funzione per la gestione asincrona AJAX
function xmlhttpPost(strURL,risultato,nome_form,elenco) {
//Inizializzo l'oggetto xmlHttpReq
var xmlHttpReq = false;
var self = this;
// qui valutiamo la tipologia di browser utilizzato per selezionare la tipologia di oggetto da creare.
// Se sono in un browser Mozilla/Safari, utilizzo l'oggetto XMLHttpRequest per lo scambio di dati tra browser e server.
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// Se sono in un Browser di Microsoft (IE), utilizzo Microsoft.XMLHTTP
//che rappresenta la classe di riferimento per questo browser
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//Apro il canale di connessione per regolare il tipo di richiesta.
//Passo come parametri il tipo di richiesta, url e se è o meno un operazione asincrona (isAsync)
self.xmlHttpReq.open('POST', strURL, true);
//setto l'header dell'oggetto
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//con UPLOAD
self.xmlHttpReq.setRequestHeader('Content-Type', 'multipart/form-data');
/* Passo alla richiesta i valori del form in modo da generare l'output desiderato*/
self.xmlHttpReq.send(recuperaValore(nome_form));
/* Valuto lo stato della richiesta */
self.xmlHttpReq.onreadystatechange = function() {
/*Gli stai di una richiesta possono essere 5
* 0 - UNINITIALIZED
* 1 - LOADING
* 2 - LOADED
* 3 - INTERACTIVE
* 4 - COMPLETE*/
//Se lo stato è completo
if (self.xmlHttpReq.readyState == 4) {
/* Aggiorno la pagina con la risposta ritornata dalla precendete richiesta dal web server.Quando la richiesta è terminata il responso della richiesta è disponibie come responseText.*/
aggiornaPagina(self.xmlHttpReq.responseText,risultato,elenco);
}
}
}
/*Questa funzione recupera i dati dal form.*/
function recuperaValore(nome_form) {
var form = document.forms[nome_form];
var commento = form.commento.value;
var id_conv = form.id_conv.value;
valore = 'id_conv=' + escape(id_conv) + '&commento=' + escape(commento);
var input = document.getElementById('file1')
var indice= 0;
for (var x = 0; x < input.files.length; x++) {
//add to list
var file = _("file1").files[x];
//alert("file"+x);
//alert(file.name+" | "+file.size+" | "+file.type);
//formdata.append("file"+x, file);
valore=valore + '&file' + x + "=" + escape(file);
indice=x;
}
valore=valore + '&indice=' + indice
alert(valore);
form.commento.value="";
return valore;
}
/*Questa funzione viene richiamata dall'oggetto xmlHttpReq per l'aggiornamento asincrono dell'elemento risultato*/
function aggiornaPagina(stringa, risultato, elenco){
//document.getElementById(risultato).innerHTML = stringa;
$("#" + elenco).append(stringa);
}
Nella pagina php recupero tutti i dati ma ho un problema sull'array dei files, non riesco a vedere nulla e non mi esegue l'upload...
Qualcuno sa dirmi dove sbaglio e se, tramite AJAX posso passare i file di un upload, e se il modo che ho usato è corretto???
Grazie
Ciaoo