Incarcare imagini pe server si afisare cu 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:

1. - Se adauga in formularul HTML ce contine caseta de tip "file", un atribut "target" a carui valoare este numele unui <iframe> din pagina (setat cu "name") si un eveniment "onsubmit()" (cu return false) care trimite datele din formular la o functie JavaScript, pentru ca pagina sa nu fie reincarcata cand se apasa pe butonul Submit.
2. - Functia JS executa trimiterea datelor care contin adresa imaginii de pe calculator, folosind evenimentul "submit()". Comform atributului "target" din eticheta <form>, sunt trimise in fereastra Iframe care apeleaza un script PHP a carui adresa este adaugata in atributul ei "src".
3. - Scriptul PHP trebuie sa efectuieze copierea si incarcarea fisierului pe server, iar ca raspuns in caz de reusita returneaza (tot in fereastra Iframe) un tag BODY cu un atribut "onload" care apeleaza o alta functie JavaScript din pagina principala (parent), transferandu-i ca parametru adresa fisierului care tocmai a fost copiat pe server.
4. - Aceasta functie preia adresa fisierului incarcat pe server si adauga cu "innerHTML" intr-un DIV un cod HTML ce contine tag-ul <img> cu imaginea respectiva.

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 https://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 https://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 .. -- AJAX cu XML->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.