it is not possible to process a file upload through the XMLHttpRequest object, becouse JavaScript has no access to your computer's file system. But, there are still ways to perform Ajax-like functionality for this task without making use of the XMLHttpRequest object.
This can be done via a hidden <iframe>, using the following method, which has four main steps:
<!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="functions.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>
/*** Script from https://coursesweb.net/ajax/ ***/ // gets data from the form and sumbit it function uploadimg(theform){ theform.submit(); // calls the function to display Status loading setStatus("Loading...", "showimg"); return false; } // this function is called from the iframe when the php return the result function doneloading(rezultat) { // decode (urldecode) the parameter wich is encoded in PHP with 'urlencode' rezultat = decodeURIComponent(rezultat.replace(/\+/g, " ")); // add the value of the parameter inside tag with 'id=showimg' document.getElementById('showimg').innerHTML = rezultat; } // displays status loading function setStatus(theStatus, theloc) { var tag = document.getElementById(theloc); // if there is "tag" if (tag) { // adds 'theStatus' inside it tag.innerHTML = '<b>'+ theStatus + "</b>"; } }
<?php // Script from https://coursesweb.net/ajax/ $savefolder = 'imgs'; // folder for upload $max_size = 250; // maxim size for image file, in KiloBytes // Allowed image types $allowtype = array('bmp', 'gif', 'jpg', 'jpeg', 'gif', 'png'); /** Uploading the image **/ $rezultat = ''; // if is received a valid file if (isset ($_FILES['myfile'])) { // checks to have the allowed extension $type = end(explode(".", strtolower($_FILES['myfile']['name']))); if (in_array($type, $allowtype)) { // check its size if ($_FILES['myfile']['size']<=$max_size*1000) { // if no errors if ($_FILES['myfile']['error'] == 0) { $thefile = $savefolder . "/" . $_FILES['myfile']['name']; // if the file can`t be uploaded, return a message if (!move_uploaded_file ($_FILES['myfile']['tmp_name'], $thefile)) { $rezultat = 'The file can`t be uploaded, try again'; } else { // Return the img tag with uploaded image. $rezultat = '<img src="'.$thefile.'" />'; echo 'The image was successfully loaded'; } } } else { $rezultat = 'The file <b>'. $_FILES['myfile']['name']. '</b> exceeds the maximum permitted size <i>'. $max_size. 'KB</i>'; } } else { $rezultat = 'The file <b>'. $_FILES['myfile']['name']. '</b> has not an allowed extension'; } } // encode with 'urlencode()' the $rezultat and return it in 'onload', inside a BODY tag $rezultat = urlencode($rezultat); echo '<body onload="parent.doneloading(\''.$rezultat.'\')"></body>'; ?>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class { display: list-item; }
var obj = { "courses": ["php", "javascript", "ajax"] }; var jsonstr = JSON.stringify(obj); alert(jsonstr); // {"courses":["php","javascript","ajax"]}
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>'; $dochtml = new DOMDocument(); $dochtml->loadHTML($strhtml); $elm = $dochtml->getElementById("dv1"); echo $elm->nodeValue; // CoursesWeb.net