Pomocí skriptů v následující jednoduché ukázce si můžete vyzkoušet upload obrazových souborů AJAXem prostřednictvím jQuery. Výhody jsou zřejmé pravděpodobně jen u formulářů s více položkami, kde možnost nahrát soubor zvlášť dává prostor ke snazšímu ošetření nežádoucích stavů a také pokud využijete nějaký plugin, který bude zobrazovat průběh nahrávání souboru na server. V této ukázce však podobný plugin použitý není – příklad uvedu později.
Skript pro zpracování souboru upload.php je zde volán bezprostředně po události submit(). Data z formuláře jsou předána po vytvoření var formData = new FormData(this); Při použití definice proměnné formData bychom uvedli ve funkci ajax() parametr data:formData. V ukázce však šetřím jeden řádek tím, že objekt vytvářím takto … data:new FormData(this).
upload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php if(is_array($_FILES)) { if(is_uploaded_file($_FILES['soubor']['tmp_name'])) { list($width, $height, $type, $attr) = getimagesize($_FILES['soubor']['tmp_name']); if( $type == IMAGETYPE_JPEG || $type == IMAGETYPE_PNG ) { $filename = basename($_FILES['soubor']['name']); $tempFilename = $_FILES['soubor']['tmp_name']; $newFilename = "obrazky/".$_FILES['soubor']['name']; if(move_uploaded_file($tempFilename, $newFilename)) { echo '<img src="'.$newFilename.'" '.$attr.' />'; }else{ echo 'Soubor se nepodařilo nahrát!'; } }else{ echo 'Tato aplikace přijímá pouze soubory typu JPG nebo PNG!'; } } } ?> |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="cs"> <head> <title></title> <meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function (e) { $("form#formular").submit(function(e) { e.preventDefault(); $.ajax({ url : "upload.php", type : "POST", data : new FormData(this), cache : false, contentType : false, processData : false, beforeSubmit : function() { //zde může být validace dat z formuláře }, success : function(data) { $("#msgBox").html(data); }, error : function(data){ $("#msgBox").html('Chyba při vykonávání skriptu!'); console.log(data); } }); }); }); </script> </head> <body> <form id="formular" action="upload.php" method="post" enctype="multipart/form-data"> <div id="msgBox"></div> <input name="soubor" type="file" /> <input type="submit" value=" Odeslat " /> </form> </body> </html> |