JQUERY, AJAX e percentuale upload

**rinosan_76bis** · 10-01-2012, 16:28

Salve a tutti... pensavo di aver trovato la soluzione, ma evidentemente qualche info mi manca... alla fine JQUERY un po mi rimane oscuro nonostante molte cose già le uso da tempo. Comunque, vediamo se voi ci capite di più. Il mio scopo è fare un upload multiplo con progress bar, ma per ora mi basta capire come l'XHR mi tira fuori i dati.
Ho la mia bella paginetta HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<div xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Gennaro Sannino"/>
<meta name="copyright" content="AKKAttp snc" />
<meta name="robots" content="{$robots}" />
<meta name="DC.language" content="ita-eng" scheme="RFC1766" />
<meta name="description" content="Prova paragrafo con foto" />
<meta name="keywords" content="Prova paragrafo con foto" />
<title>Prova form in php</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
<style>
body{font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;padding:10px;}  
h1{ margin-top:0; }  
#main{width: 300px;margin:auto;background: #ececec;padding: 20px;border: 1px solid #ccc;}  
#image-list{list-style:none;margin:0;padding:0;}  
#image-list li{background: #fff;border: 1px solid #ccc;text-align:center;padding:20px;margin-bottom:19px;}  
#image-list li img{width: 258px;vertical-align: middle;border:1px solid #474747;} 
</style>
</head>
<body>  
 <div id="main">  
  <h1>Upload Your Images</h1>  
  <form method="post" enctype="multipart/form-data"  action="prova_upload_multiplo_send.php">  
   <input type="file" name="images" id="images" multiple />  
   <button type="submit" id="btn">Upload Files!</button>  
  </form>  
  <div id="response"></div>  
  <div id="perc"></div> 
  <ul id="image-list">  
  [/list]
 </div>  
</body>  
</html>
<script type="text/javascript">
(function () {
 var input = document.getElementById("images"), 
 formdata = false;
 if (window.FormData) {
  formdata = new FormData();
  document.getElementById("btn").style.display = "none";
 }
	
 input.addEventListener("change", function (evt) {
 		document.getElementById("response").innerHTML = "Uploading . . ."
 		var i = 0, len = this.files.length, img, reader, file;
		for ( ; i < len; i++ ) {
		 file = this.files[i];
 		 if (!!file.type.match(/image.*/)) {
		  if ( window.FileReader ) {
		   reader = new FileReader();
		   reader.onloadend = function (e) { 
						showUploadedItem(e.target.result, file.fileName);
				      };
		   reader.readAsDataURL(file);
		  }
		  if (formdata) { formdata.append("images[]", file); }
		 }	
		}
		if (formdata) {
			$.ajax({
				url: "prova_upload_multiplo_send.php",
				type: "POST",
				data: formdata,
				processData: false,
				contentType: false,
				success: function (res) {
					document.getElementById("response").innerHTML = res; 
				},
				beforeSend: function(xhr){  alert(xhr);
							//xhr.upload.addEventListener("progress", uploadProgress, false);
						 }
			});
		}
	}, false);
}());

function showUploadedItem (source) {
 var list = document.getElementById("image-list"),
 li   = document.createElement("li"),
 img  = document.createElement("img");
 img.src = source;
 li.appendChild(img);
 list.appendChild(li);
}   

function uploadProgress(evt) {
 if (evt.lengthComputable) {
  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  document.getElementById('perc').innerHTML = percentComplete.toString() + '%';
 }else{
  document.getElementById('perc').innerHTML = 'unable to compute';
 }
}
</script>

che manda il tutto alla pagina lato server

codice:

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}


echo "<h2>Successfully Uploaded Images</h2>";
?>

Il codice era nato solo per fare l'upload e visualizzazione dei file, ma io ho pensato di aggiungere anche la barra della percentuale.
So che beforeSend si attiva subito dopo l'avvio e so che ricevo come parametro XHR, ma se provo ad aggiungere l'evento "progress" all'oggetto XHR come da codice (commentato) ricevo errore. Cosa mi manca per potere capire?
Grazie

**daniele_dll** · 10-01-2012, 19:23

Ciao,

come da richiesta sposto in Javascript, più attenzione in futuro

**rinosan_76bis** · 11-01-2012, 04:18

Ringrazio

**Vindav** · 11-01-2012, 12:21

beforeSend si attiva prima dell'invio della chiamata ajax e in genere serve per impostare/modificare qualche attributo all'oggetto jqXHR.
Come vedi non ho scritto XMLHttpRequest ma jqXHR che sono due oggetti differenti, il primo è l'oggetto nativo del browser mentre il secondo è un oggetto della libreria jquery. Quindi è ovvio che l'istruzione che tenti di eseguire

xhr.upload.addEventListener("progress", uploadProgress, false);

non potrà mai funzionare. Inoltre quell'istruzione (anzi praticamente tutto lo scirpt) credo funzioni esclusivamente in firefox, per di piu in versioni abbastanza recenti.

**rinosan_76bis** · 11-01-2012, 16:01

ma allora come le fanno le estensioni JQUERY con progress bar? se ne trovano moltissime ed ormai ben poche usano flash o roba proprietaria di APACHE o PHP, molti usano questo oggetto, ma allora mi sfugge come

Voi info non le avete?

**Vindav** · 11-01-2012, 16:36

per quanto ne so di solito si recupera dal server il numero di byte letti facendo + chiamate ajax , quindi il grosso da gestire è lato server... che poi si utilizzi jquery o js è indifferente. Non mi è chiaro perche vuoi implementare tutto da zero, come hai già detto esistono molti plugin già pronti con progressbar, upload multipli e altre features perche non utilizzare quelli? questioni didattiche?

Mi sono informato un po' in rete e l' XMLHttpRequest Level 2 (a cui fai riferimento) dovrebbe essere supportato in Chrome 2.0+, Firefox 3.5+ and Safari 4.0+, pensavo peggio. Non ne sono certo però per quanto ne so jquery non supporta ancora XMLHttpRequest Level 2, quindi a sto punto ti conviene non utilizzarlo

edit: leggendo la documentazione ho visto che con questa istruzione $.ajaxSettings.xhr() recuperi l'oggetto XMLHttpRequest nativo del browser, ora presumo che facendo riferimento a questo oggetto si puo provare ad implementare una chiamata ajax/jquery utilizzando i metodi/eventi messi a disposizione da XMLHttpRequest Level 2 compresa la gestione della progressbar

**rinosan_76bis** · 12-01-2012, 00:32

DIciamo che il motivo era didattico/produttivo, quando non riesco a far funzionare una cosa come vorrei io, preferisco farmela

Ho abbandonato la via del JQUERY (solo per questa cosetta) ed ho implementato tutto con XHR e JS e ci sono riuscito, devo mettere un po di cose a posto ma tendenzialmente funziona. Ho paura solo a provarlo su IE!!!!

**BOES** · 30-04-2012, 19:35

Originariamente inviato da rinosan_76bis
DIciamo che il motivo era didattico/produttivo, quando non riesco a far funzionare una cosa come vorrei io, preferisco farmela

Ho abbandonato la via del JQUERY (solo per questa cosetta) ed ho implementato tutto con XHR e JS e ci sono riuscito, devo mettere un po di cose a posto ma tendenzialmente funziona. Ho paura solo a provarlo su IE!!!!

POTRESTI UPPARE il codice funzionante, sono interessato...

**rinosan_76bis** · 30-04-2012, 22:25

spero di ricordarmene il mercoledì, al massimo ricordatemelo...

Discussione: JQUERY, AJAX e percentuale upload

Strumenti discussione

Ricerca discussione

Visualizza

JQUERY, AJAX e percentuale upload

Permessi di invio