Incarcarea imaginilor pe server si afisarea lor folosind Ajax

Titlul poate parea neadevarat deoarece nu se pot incarca imagini pe server direct cu Ajax, din cauza ca obiectul XMLHttpRequest nu are acces la fisierele din calculator (acest lucru este o masura de siguranta).
Totusi, folosind tehnologia de tip Ajax, si anume combinatia de limbaje HTML, CSS, JavaScript si PHP (sau alt limbaj pentru server) se poate realiza copierea unei imagini pe server si afisarea ei in pagina fara ca aceasta sa fie reincarcata. Acest lucru se poate face printr-un <iframe> ascuns in pagina, aplicand urmatoarea metoda, care are patru etape principale:


Intre pasul de la prima etapa, trimiterea fisierului, si afisarea acestuia din etapa 4, trece un timp in care utilizatorul nu stie ce se intampla cu upload-ul, mai ales daca fisierul e mare poate dura mai mult. In acest caz e util sa adaugati in functia JS care e apelata la primul pas, un cod care sa adauge in locul unde trebuie afisata imaginea un text precum "Loading ..." care va sta pana va fi inlocuit de imagine.

Asta e pe scurt partea teoretica, in continuare studiati cu atentie exemplul de mai jos, in care sunt aplicate practic etapele prezentate mai sus.
Exemplul contine trei fisiere:
            - "index.php" (poate fi si .html) - reprezinta pagina afisata in browser si contine formularul, iframe-ul si div-ul pt. afisarea imaginii,
            - "functii.js" - in care sunt scrise functiile JavaScript,
            - "upload_img.php" - cu scriptul PHP petru incarcarea imagini pe server si raspunsul care trebuie adaugat in Iframe.
Mai jos sunt codurile pentru fiecare fisier, trebuie create toate in acelasi director. Explicatiile necesare despre rolul fiecarei functii le gasiti in docuentatiile adaugate in cod.
Daca doriti sa folositi acest model in site-urile dv., trebuie sa creati si directorul in care vor fi copiate imaginile (cu numele "imgs" si permisiuni CHMOD de scriere in el) in acelasi catalog unde adaugati aceste trei fisiere. Sau le puteti descarca de aici -> Ajax_Upload_Image.zip

Codul pentru "index.php"

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

<title>Ajax Upload - Show Image</title>
<style type="text/css">
  #uploadframe { display:none; }
</style>
<script type="text/javascript" src="functii.js"></script>

</head>
<body>

<div id="showimg"> </div>
<form id="uploadform" action="upload_img.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploadimg(this); return false">
  <input type="file" id="myfile" name="myfile" />
  <input type="submit" value="Submit" />
  <iframe id="uploadframe" name="uploadframe" src="upload_img.php" width="8" height="8" scrolling="no" frameborder="0"></iframe>
</form>

</body>
</html>
		

Fisierul "functii.js"

/*** Script de la http://www.marplo.net/ajax ***/

// Functia care trimite datele din formular, fiind transferate la iframe
function uploadimg(theform){
  theform.submit();

  // Apeleaza functia pt. afisare Status loading
  setStatus("Loading...", "showimg");
  return false;
}

//Function care este executata dupa trimiterea datelor la iframe
// Este apelata din iframe. Prin onload-ul din eticheta <body> care apare in iframe dupa incarcarea imaginii pe server
function doneloading(rezultat) {
  // Decodeaza (urldecode) parametrul primit care e din PHP codat cu 'urlencode'
  rezultat = decodeURIComponent(rezultat.replace(/\+/g,  " "));

  //Adauga sirul primit din parametru in div-ul 'showimg'
  document.getElementById('showimg').innerHTML = rezultat;
}

// Functia care afiseaza status-ul de loading
function setStatus(theStatus, theloc) {
  var tag = document.getElementById(theloc);

  // Daca in document se afla tag-ul cu id-ul din parametru
  if (tag) {
    // Adauga in ea sirul din 'theStatus' primit ca parametru
    tag.innerHTML = '<b>'+ theStatus + "</b>";
  }
}
		

Fisierul "upload_img.php"

<?php
// Script de la http://www.marplo.net/ajax

$savefolder = 'imgs';		// Directorul pt. imagini
$max_size = 250;			// Marimea maxima, in KiloBytes, care este permisa

// Seteaza matricea cu tipurile de imagini permise
$allowtype = array('bmp', 'gif', 'jpg', 'jpeg', 'gif', 'png');


/** Incarcarea imaginii pe server **/

$rezultat = '';
// Daca este primit din formular un fisier valid
if (isset ($_FILES['myfile'])) {
  // Verifica daca fisierul are tipul de extensie permis
  $type = end(explode(".", strtolower($_FILES['myfile']['name'])));
  if (in_array($type, $allowtype)) {
    // Verifica daca fisierul are marimea permisa
	if ($_FILES['myfile']['size']<=$max_size*1000) {
      // Daca nu sunt erori in procesul de copiere
      if ($_FILES['myfile']['error'] == 0) {
	    // Seteaza locatia si numele pt. incarcare pe server
        $thefile = $savefolder . "/" . $_FILES['myfile']['name'];
        // Daca fisierul nu poate fi incarcat, returneaza mesaj
        if (!move_uploaded_file ($_FILES['myfile']['tmp_name'], $thefile)) {
          $rezultat = ' Fisierul nu a putut fi copiat, incercati din nou';
        }
        else {
          // Returneaza eticheta HTML cu imaginea.
		  $rezultat = '<img src="'.$thefile.'" />';
          echo 'Imaginea a fost incarcata cu succes';
        }
      }
    }
	else { $rezultat = 'Fisierul <b>'. $_FILES['myfile']['name']. '</b> depaseste marimea permisa de maxim <i>'. $max_size. 'KB</i>'; }
  }
  else { $rezultat = 'Fisierul <b>'. $_FILES['myfile']['name']. '</b> nu are tipul de extensie permis'; }
}

// Codeaza cu 'urlencode()' variabila $rezultat si o returneaza in 'onload', itr-un tag BODY
$rezultat = urlencode($rezultat);
echo '<body onload="parent.doneloading(\''.$rezultat.'\')"></body>';
?>
		

Trimitere date prin GET ... <<-- Anterior ----------- Urmator -->> AJAX cu XML

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Incarcare imagini pe server si afisare cu Ajax - Tutorial Ajax