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:
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>'; ?>
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.