SHARE
TWEET

Untitled

a guest Jun 19th, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <script>
  6.             function _(el) {
  7.                 return document.getElementById(el);
  8.             }
  9.             function uploadFile() {
  10.                 var file = _("file1").files[0];
  11.                 //alert(file.name+" | "+file.size+" | "+file.type);
  12.                 var formdata = new FormData();
  13.                 formdata.append("file1", file);
  14.                 var ajax = new XMLHttpRequest();
  15.                 ajax.upload.addEventListener("process", progressHandler, false);
  16.                 ajax.addEventListener("load", completeHander, false);
  17.                 ajax.addEventListener("error", errorHandler, false);
  18.                 ajax.addEventListener("abort", abortHandler, false);
  19.                 ajax.open("POST", "file_upload_parser.php");
  20.                 ajax.send(formdata);
  21.             }
  22.             function progressHandler(event) {
  23.                 _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  24.                 var percent = (event.loaded / event.total) * 100;
  25.                 _("progressBar").value = Math.round(percent);
  26.                 _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
  27.             }
  28.             function completeHandler(event) {
  29.                 _("status").innerHTML = event.target.responseText;
  30.                 _("progressBar").value = 0;
  31.             }
  32.             function errorHandler(event) {
  33.                 _("status").innerHTML = "Upload Failed";
  34.             }
  35.             function abortHandler(event) {
  36.                 _("status").innerHTML = "Upload Aborted";
  37.             }
  38.         </script>
  39.     </head>
  40.     <body>
  41.         <h2>HTML5 File Upload Progress Bar Tutorial</h2>
  42.         <form id="upload_form" enctype="multipart/form-data" method="post">
  43.             <input type="file" name="file1" id="file1"><br>
  44.             <input type="button" value="Upload File" onclick="uploadFile()">
  45.             <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
  46.             <h3 id="status"></h3>
  47.             <p id="loaded_n_total"></p>
  48.         </form>
  49.     </body>
  50. </html>
  51.      
  52. <?php
  53. $fileName = $_FILES["file1"]["name"]; // The file name
  54. $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
  55. $fileType = $_FILES["file1"]["type"]; // The type of file it is
  56. $fileSize = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
  57. if (!$fileTmpLoc) { // if file not chosen
  58.     echo "ERROR: Please browse for a file before clicking the upload button.";
  59.     exit();
  60. }
  61. if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")) {
  62.     echo "$fileName upload is complete";
  63. } else {
  64.     echo "move_uploaded_file function failed";
  65. }
  66. ?>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top