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 tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Incarcare imagini pe server si afisare cu Ajax

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (56939)
  2. Cursuri limba engleza gratuite si lectii online (27711)
  3. Gramatica limbii engleze - Prezentare Generala (109735)
  4. Gradele de comparatie: comparative, superlative (17631)
  5. Lucru cu Imagini in JavaScript (389)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2226)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2005)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1861)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1706)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1358)