Ajax File Uploader

Submitted by razormist on Monday, February 27, 2017 - 18:02.

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';

<!DOCTYPE html>
<html lang = "en">
        <head>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
                <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
                <title>Ajax  File Uploader</title>
        </head>
<body>
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class = "row">
                <div class  = "col-md-4"></div>
                <div class = "col-md-4 well" style = "word-wrap:break-word;">
                        <h3 class = "text-primary">Ajax File Uploader</h3>
                        <hr style = "border-top:1px solid #000;"/>
                        <form id = "upload_form" enctype = "multipart/form-data" method = "POST">
                                <div class = "form-group">
                                        <input type = "file" class = "form-control" name = "file1" id = "file1"/>
                                        <br />
                                        <progress id = "progressBar" value = "0" max = "100" style = "width:425px;"></progress>
                                        <br  />
                                        <h4 id = "status"></h4>
                                        <p id = "total_load"></p>
                                        <button type = "button" class = "btn btn-primary" onclick = "uploadFile()"><span class = "glyphicon glyphicon-upload"></span> Upload File</button>
                                </div>  
                        </form>
                </div>
        </div>
</body> 
<script src = "js/ajax.js"></script>
</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'

function uploadFile(){
        var file = document.getElementById("file1").files[0];
        var formdata = new FormData();
        formdata.append("file1", file);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.upload.addEventListener("progress", progress, false);
        xmlhttp.addEventListener("load", complete, false);
        xmlhttp.addEventListener("error", error, false);
        xmlhttp.addEventListener("abort", abort, false);
        xmlhttp.open("POST", "upload.php");
        xmlhttp.send(formdata);
}
 
function progress(event){
        document.getElementById("total_load").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
        var percent  = (event.loaded / event.total) * 100;
        document.getElementById("progressBar").value = Math.round(percent);
        document.getElementById("status").innerHTML = Math.round(percent)+"% Uploading..." ;
}
 
function complete(event){
        document.getElementById("status").innerHTML = event.target.responseText;
        document.getElementById("progressBar").value = 0;
}
 
function error(event){
        document.getElementById("status").innerHTML = "Upload Failed";
}
 
function abort(event){
        document.getElementById("status").innerHTML = "Upload Abort";
}

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'

<?php
        $name = $_FILES['file1']['name'];
        $path  = pathinfo($name, PATHINFO_EXTENSION);
        $file = time().'.'.$path;
        $temp = $_FILES['file1']['tmp_name'];
        $type = $_FILES['file1']['type'];
        $size = $_FILES['file1']['size'];
        $error = $_FILES['file1']['error'];
        if(!$temp){
                echo "<label style = 'color:#ff0000;'>Fatal Error</label>";
                exit();
        }
        if(move_uploaded_file($temp, "upload/$file")){
                echo "$name <br /><br /><label style = 'color:#00ff00;'>Complete</label>";
        }else{
                echo "Error file upload";
        }
?>

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!!

Add new comment

42 views