UPLOAD POZA cu status in procente

[cadou]

Am nevoie de un cod de incarcare imagine pe site dar sa apara cat la % sa incarcat in fiecare moment.

Salut
Incearca scripturile pentru upload, cu progress-bar, de la aceste adrese:
uploadify.com/
easyscript4u.blogspot.ro/2014/02/file-upload-with-progress-bar-using.html
9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html

Sau cauta pe internet: " jquery php upload script ".

ms, momentan merge link 2 , link 3 nu merge sa descarc, nu imi da voie. la fel si pt link 1.
la link 2 momentan l-am testat si merge, mai am niste chestii de grafica de editat si ceva conditii de pus pe acolo .

Am incercat eu ceva dar nu am reusit sa finalizez

Cod: Selectaţi tot

<input type="file" name="uploadedfile" id="uploadedfile"><br>  
   <div class="progress">  
     <div class="bar"></div >  
     <div class="percent"></div >  
   </div>  
   <div id="status"></div>
	<span class="statusaddpoza" style="color:red;"></span>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  
 <script src="http://malsup.github.com/jquery.form.js"></script>  
 <script> 
document.getElementById('uploadedfile').addEventListener('change', function(e){
	var getval = e.target.value;
	var poza = $('#uploadedfile').val();
	var pacc = (".jpg", ".jpeg");
	if(poza.search(pacc) == -1)
	{
	$('.statusaddpoza').html('<img class="error" src="/inregistrare/stare-error.png"> Te rugam alege din calculator o poza de tip .jpg!');
	}
	else
	{
	$('.statusaddpoza').html('<img class="error" src="/inregistrare/stare-succes.png">');
	
	
	
	 (function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })(); 
	
	}
});

 
     
 </script>  

Deci in prima parte daca aleg o poza, se verifica extensia poze, daca are extensia jpg, jpeg sa incarce poza, daca nu sa dea eroarea corespunzatoare. Dar nu reusesc sa pun incarcarea pe site... ? un ajutor ?

Tagul:

Cod: Selectaţi tot

<input type="file" name="uploadedfile" id="uploadedfile" />

Trebuie adaugat intr-un <form> in care adaugi la "action" adresa fisierului php pentru upload.
Functia ajaxForm() din pluginul jquery.form.js se executa cand e apasat butonul submit.
Daca vrei ca actiunea submit sa se execute automat cu acel plugin, se foloseste ajaxSubmit().

Cod: Selectaţi tot

<form action="fisier_upload.php" id="form_up" method="post" enctype="multipart/form-data">  
  <input type="file" name="uploadedfile" id="uploadedfile" />
</form> 
   <div class="progress"> 
     <div class="bar"></div > 
     <div class="percent"></div > 
   </div> 
   <div id="status"></div>
   <span class="statusaddpoza" style="color:red;"></span>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
 <script src="http://malsup.github.com/jquery.form.js"></script> 
 <script>
// to auto submit the form with ajax from jquery.form.js plugin
function ajaxFrm() {
 var bar = $('.bar'); 
 var percent = $('.percent'); 
 var status = $('#status'); 
 $('form').ajaxSubmit({
   beforeSend: function() {
     status.empty(); 
     var percentVal = '0%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
   }, 
   uploadProgress: function(event, position, total, percentComplete) { 
     var percentVal = percentComplete + '%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
   }, 
   complete: function(xhr) { 
     bar.width("100%"); 
     percent.html("100%"); 
     status.html(xhr.responseText); 
   } 
 });
 return false;
}
document.getElementById('uploadedfile').addEventListener('change', function(e){
  var getval = e.target.value;
  var poza = $('#uploadedfile').val();
  // check file extension, add extensions separated by | (ext1|ext2|ext3)
  if(poza.match(/\.(jpg|jpe|jpeg)$/i) == null) {
    $('.statusaddpoza').html('<img class="error" src="/inregistrare/stare-error.png"> Te rugam alege din calculator o poza de tip .jpg!');
  }
  else {
    $('.statusaddpoza').html('<img class="error" src="/inregistrare/stare-succes.png">');
    ajaxFrm();
   }
});     
</script>

Ok ms, dar am intampinat o problema .
Deci pe pagina de inregistrare am formularu de inregistrare, iar ascuns am formularul de adaugare poza, dupa ce completezi toate campurile din inregistrare, sterg div-ul ce are formularu de inregistrare si il afisez pe cel de adaugare poza.
De inregistrat inregistreaza si am pus sa imi creeze sesiunea (sa ma logheze pe site direct pt ca la numele pozei e id-ul UNIC al utilizatorului din baza de date - id sesiune) , dar am o problema la adaugarea pozei.

Calea catre "inregistrare.php" si "profil-test1.php" par a nu fi corecte.
Poate ca acele fisiere php nu sunt direct in Root la site. La "action" in <form> trebuie sa pui adresa corecta.

Crede-ma ca am complicat fisierul de inregistrare pe site ca are o gramada de linii de cod, o sa incerc sa explic:

Cod: Selectaţi tot

<?php session_start(); include('../conectare.php'); include('../meniu-sus.php'); 

// daca e logat si acceseaza adresa de inregistrare il redirectioneaza catre propriul profil
if(isset($_SESSION['nume'])) {
  header("Location: /profil-$_SESSION[nume].php"); 
}
else {
  // daca nu afiseaza pagina de inregistrare
} 

Problema e de aici cu sesiunea, daca scot sesiunea totul este ok.
Pana la urma m-am gandit sa pun un iframe acolo la adaugarea pozei ca sa rezolv problema.