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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Incarcare imagini pe server si afisare cu Ajax

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (41178)
  2. Articolul din limba engleza - The article (21217)
  3. Verbe frazale din limba Engleza (12373)
  4. Numerale, Numere in limba engleza - Numerals (19378)
  5. Poezii pentru copii, in engleza (5842)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2987)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (2215)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2015)
  4. Curs HTML gratuit Tutoriale HTML5 (1978)
  5. Creare si editare pagini HTML (1504)