Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you post to PHP in JavaScript without Ajax?
    primarykey
    data
    text
    <p>So I've got this code for a drag and drog file uploader to PHP via ajax, but apparently my web host doesn't have ajax. Is there any way I can do it without ajax? Specifically I am referring to the UploadFile function, towards the end, after the progress bar parts (which don't seem to work either... )</p> <pre><code>(function() { // getElementById function $id(id) { return document.getElementById(id); } // output information function Output(msg) { var m = $id("messages"); m.innerHTML = msg + m.innerHTML; } // file drag hover function FileDragHover(e) { e.stopPropagation(); e.preventDefault(); e.target.className = (e.type == "dragover" ? "hover" : ""); } // file selection function FileSelectHandler(e) { // cancel event and hover styling FileDragHover(e); // fetch FileList object var files = e.target.files || e.dataTransfer.files; // process all File objects for (var i = 0, f; f = files[i]; i++) { ParseFile(f); UploadFile(f); } } //upload images function UploadFile(file) { var xhr = new XMLHttpRequest(); if ( xhr.upload &amp;&amp; file.type == "image/jpeg" || file.type == "image/gif" || file.type == "image/jpg" || file.type == "image/png" &amp;&amp; file.size &lt;= $id("MAX_FILE_SIZE").value ) { //create progress bar var o = $id("progress"); var progress = o.appendChild(document.createElement("p")); progress.appendChild(document.createTextNode("upload " + file.name)); //progress bar xhr.upload.addEventListener("progress", function(e) { var pc = parseInt(100 - (e.loaded / e.total * 100)); progress.style.backgroundPosition = pc + "% 0"; }, true); //file received/failed xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { progress.className = (xhr.status == 200 ? "success" : "failure"); } }; //start upload xhr.open("POST", $is("upload").action, true); xhr.setRequestHeader("X_FILENAME", file.name); xhr.setRequestHeader("Content-type", file.type); xhr.send(file); } } // initialize function Init() { var fileselect = $id("fileselect"), filedrag = $id("filedrag"), submitbutton = $id("submitbutton"); // file select fileselect.addEventListener("change", FileSelectHandler, false); // is XHR2 available? var xhr = new XMLHttpRequest(); if (xhr.upload) { // file drop filedrag.addEventListener("dragover", FileDragHover, false); filedrag.addEventListener("dragleave", FileDragHover, false); filedrag.addEventListener("drop", FileSelectHandler, false); filedrag.style.display = "block"; // remove submit button submitbutton.style.display = "block"; } } // output file information function ParseFile(file) { Output( "&lt;p&gt;File information: &lt;strong&gt;" + file.name + "&lt;/strong&gt; type: &lt;strong&gt;" + file.type + "&lt;/strong&gt; size: &lt;strong&gt;" + file.size + "&lt;/strong&gt; bytes&lt;/p&gt;" ); // display an image if (file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( "&lt;p&gt;&lt;strong&gt;" + file.name + ":&lt;/strong&gt;&lt;br /&gt;" + '&lt;img src="' + e.target.result + '" /&gt;&lt;/p&gt;' ); } reader.readAsDataURL(file); $("#fileselect").val(file); } // display text if (file.type.indexOf("text") == 0) { var reader = new FileReader(); reader.onload = function(e) { Output( "&lt;p&gt;&lt;strong&gt;" + file.name + ":&lt;/strong&gt;&lt;/p&gt;&lt;pre&gt;" + e.target.result.replace(/&lt;/g, "&amp;lt;").replace(/&gt;/g, "&amp;gt;") + "&lt;/pre&gt;" ); } reader.readAsText(file); } } // call initialization file if (window.File &amp;&amp; window.FileList &amp;&amp; window.FileReader) { Init(); } })(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload