Ajax File Uploader

In this tutorial we will create a Ajax File Uploader. Ajax is a new technique for creating better, faster, and more interactive web applications. Ajax is pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest). It is widely used by other well known websites like facebook. Let's take a look and start coding. Creating A HTML Form This will be the interface of the application. To create this copy/paste the code below then name it 'index.php';
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. <head>
  4. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  5. <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
  6. <title>Ajax File Uploader</title>
  7. </head>
  8. <body>
  9. <nav class = "navbar navbar-default">
  10. <div class = "container-fluid">
  11. <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
  12. </div>
  13. </nav>
  14. <div class = "row">
  15. <div class = "col-md-4"></div>
  16. <div class = "col-md-4 well" style = "word-wrap:break-word;">
  17. <h3 class = "text-primary">Ajax File Uploader</h3>
  18. <hr style = "border-top:1px solid #000;"/>
  19. <form id = "upload_form" enctype = "multipart/form-data" method = "POST">
  20. <div class = "form-group">
  21. <input type = "file" class = "form-control" name = "file1" id = "file1"/>
  22. <br />
  23. <progress id = "progressBar" value = "0" max = "100" style = "width:425px;"></progress>
  24. <br />
  25. <h4 id = "status"></h4>
  26. <p id = "total_load"></p>
  27. <button type = "button" class = "btn btn-primary" onclick = "uploadFile()"><span class = "glyphicon glyphicon-upload"></span> Upload File</button>
  28. </div>
  29. </form>
  30. </div>
  31. </div>
  32. </body>
  33. <script src = "js/ajax.js"></script>
  34. </html>
Creating Asynchronous Script This is where the Ajax function will be called. To do that copy/paste the code below then name it 'ajax.js'
  1. function uploadFile(){
  2. var file = document.getElementById("file1").files[0];
  3. var formdata = new FormData();
  4. formdata.append("file1", file);
  5. var xmlhttp = new XMLHttpRequest();
  6. xmlhttp.upload.addEventListener("progress", progress, false);
  7. xmlhttp.addEventListener("load", complete, false);
  8. xmlhttp.addEventListener("error", error, false);
  9. xmlhttp.addEventListener("abort", abort, false);
  10. xmlhttp.open("POST", "upload.php");
  11. xmlhttp.send(formdata);
  12. }
  13.  
  14. function progress(event){
  15. document.getElementById("total_load").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  16. var percent = (event.loaded / event.total) * 100;
  17. document.getElementById("progressBar").value = Math.round(percent);
  18. document.getElementById("status").innerHTML = Math.round(percent)+"% Uploading..." ;
  19. }
  20.  
  21. function complete(event){
  22. document.getElementById("status").innerHTML = event.target.responseText;
  23. document.getElementById("progressBar").value = 0;
  24. }
  25.  
  26. function error(event){
  27. document.getElementById("status").innerHTML = "Upload Failed";
  28. }
  29.  
  30. function abort(event){
  31. document.getElementById("status").innerHTML = "Upload Abort";
  32. }
The code above will processed the value of the input file type. The uploadFile() function will store the file then store into a javascript variable when the button is clicked. The progress function will start to fill up the gauge when the button is clicked simultaneously. Creating A PHP Script This is where the file is processed by PHP script. To make this copy/paste the code below and name it 'upload.php'
  1. <?php
  2. $name = $_FILES['file1']['name'];
  3. $path = pathinfo($name, PATHINFO_EXTENSION);
  4. $file = time().'.'.$path;
  5. $temp = $_FILES['file1']['tmp_name'];
  6. $type = $_FILES['file1']['type'];
  7. $size = $_FILES['file1']['size'];
  8. $error = $_FILES['file1']['error'];
  9. if(!$temp){
  10. echo "<label style = 'color:#ff0000;'>Fatal Error</label>";
  11. exit();
  12. }
  13. if(move_uploaded_file($temp, "upload/$file")){
  14. echo "$name <br /><br /><label style = 'color:#00ff00;'>Complete</label>";
  15. }else{
  16. echo "Error file upload";
  17. }
  18. ?>
The code above will get the file from the asynchronous request then store it into a php variable. Then it will move the uploaded file to a specific folder location simultaneously. There you have it we created a ajax file uploader. I hope that this tutorial is the one you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Tags

Add new comment