...
Code Block | ||||
---|---|---|---|---|
| ||||
<html> <head> <title>PHP upload file demo</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function _(el) { return document.getElementById(el); } function formatNumber(num) { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') } function completeCTHandler(event) { _("upload_info").innerHTML = event.target.responseText; } function progressCTHandler(event) { if (event.lengthComputable) { var percentage = Math.round(event.loaded/event.total*100); _("upload_info").innerHTML = formatNumber(event.loaded) + "/" + formatNumber(event.total) + " bytes uploaded (" + percentage.toString() + "%)<br>" + "<progress id=\"progressBar\" value=\"" + percentage.toString() + "\" max=\"100\"></progress>"; } } function uploadFiles() { _("upload_form").style.display = "none"; _("upload_info").innerHTML = "Uploading....<br><br>"; var formdata = new FormData(); formdata.append("whoami", "CK"); total_files = _("files").files.length; for( var i=0; i<total_files; i++) formdata.append("files[]", _("files").files[i]); var ajax = new XMLHttpRequest(); ajax.addEventListener("load", completeCTHandler, false); ajax.upload.addEventListener("progress", progressCTHandler, false); ajax.open("POST", "submit_upload.php"); ajax.send(formdata); } </script> <body> <div id="upload_form"> <form method="post" enctype="multipart/form-data" name="formUploadFile"> <label>Select single filefiles to upload:</label> <input type="file" id="files" name="files[]" multiple="multiple" /> <input type="button" value="Upload File" onClick="uploadFiles()"/> </form> </div> <div id="upload_info"></div> </body> </html> |
...