Curs 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 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>';
?>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Incarcare imagini pe server si afisare cu Ajax

Last accessed pages

  1. Nu am niciun motiv de manie sau de teama (121)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (66612)
  3. Prezent perfect continuu - Exercitii si teste incepatori (15680)
  4. Exercitii engleza - English Tests and exercises - Grammar (113269)
  5. Demonstrative (2010)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (214)
  2. Gramatica limbii engleze - Prezentare Generala (178)
  3. Exercitii engleza - English Tests and exercises - Grammar (166)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (115)
  5. Coduri pt culori (110)