How to include loading gif while file upload and insert to database is in progress

Question

I have to load a file into a temporary location first before reading it and inserting it into a database. But how can I include a loading gif while its doing all of these, can someone please show me? -Thanks

<input type="file" name="myfile">
<input type="submit"  id = "upload" value="Upload">    
<div id= "loading_gif">
</div>


$(document).ready(function () {
$("#upload").click(function () {     

    $.ajax({
        type: "POST",
        url: "upload.php",
        enctype: 'multipart/form-data',
        data: {
            file: myfile
        },
        success: function () {
            alert("Data has been Uploaded: ");
          }
       });
     });
  });



<?php
$temp_location = "tmp/";

if(isset($_FILES["myfile"]))
{    
  if ($_FILES["myfile"]["error"] > 0)
  {
     echo "File loading error! ";
  }
  else
  {        
    move_uploaded_file($_FILES["myfile"]["tmp_name"],
    $temp_location. $_FILES["myfile"]       ["name"]);

    //read myfile and insert data into database

    echo "File uploaded into database";
   } 
  }
?>

Am I missing something? I don't see your AJAX implementation — esqew, Oct 22 '13 at 18:32
How you display a loading GIF has NOTHING to do with what is happening on the SERVER because the GIF is on the BROWSER. — Diodeus - James MacFarlane, Oct 22 '13 at 18:32
Standard AJAX can't upload a file anyways... this will never work as written. Plus, your server side code is a hideous security risk and you are opening your server to a COMPLETE remote compromise. Stop working on this code until you've learned how to handle uploads securely — Marc B, Oct 22 '13 at 18:53

Oki Erie Rinaldi · Answer 1 · 2015-09-03T02:29:50.917

I assume you have an image loading.gif. put it into img tag and set it's id to 'loading', and then make it invisible.

<img id='loading' src='loading.gif' style='visibility: hidden;'>

You have to create javascript functions to show and hide the loading image. Here's the script:

<script>
function showLoading(){
document.getElementById("loading").style = "visibility: visible";
}
function hideLoading(){
document.getElementById("loading").style = "visibility: hidden";
}
</script>

To show the loading image when you are uploading, call the showLoading() function jus before the ajax call, and then hide it when you are done uploading with hideLoading() function.
Here's the implementation :

$("#upload").click(function () {     
    //call show loading function here
    showLoading();
    $.ajax({
        type: "POST",
        url: "upload.php",
        enctype: 'multipart/form-data',
        data: {
            file: myfile
        },
        success: function () {
            //call hide function here
            hideLoading();
            alert("Data has been Uploaded: ");
        },
        error  : function (a) {//if an error occurs
            hideLoading();
            alert("An error occured while uploading data.\n error code : "+a.statusText);
        }
    });
});

And I know you know where you have to put the jquery script inthe document. :D

score 0 · Answer 2 · answered Oct 22 '13 at 18:39

Now you should have JQUERY for that. try to put the following code in the <head> part of your code, this loads the jquery library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

put the hidden gif loader somewhere u want to display

<img id="loading_gif" src="loading.gif" />

Hide it on page load: $('#loading_gif').hide();

now in javascript show and hide the loader

function submit()
{
    $('#loading_gif').show();
    // do your upload stuff
    $('#loading_gif').hide();    
}

user2511140 · Answer 3 · 2013-10-22T20:30:49.650

 <style>
.ajax_overlay {}
.ajax_loader {background: url("loading.gif") no-repeat center center transparent;width:100%;height:100%;}
</style>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
    function ajaxLoader (el, options) {
        // Becomes this.options
        var defaults = {
            bgColor         : '#fff',
            duration        : 800,
            opacity         : 0.7,
            classOveride    : false
        }
        this.options    = jQuery.extend(defaults, options);
        this.container  = $(el);

    this.init = function() {
        var container = this.container;
        // Delete any other loaders
        this.remove(); 
        // Create the overlay 
        var overlay = $('<div></div>').css({
                'background-color': this.options.bgColor,
                'opacity':this.options.opacity,
                'width':container.width(),
                'height':container.height(),
                'position':'absolute',
                'top':'0px',
                'left':'0px',
                'z-index':99999
        }).addClass('ajax_overlay');
        // add an overiding class name to set new loader style 
        if (this.options.classOveride) {
            overlay.addClass(this.options.classOveride);
        }
        // insert overlay and loader into DOM 
        container.append(
            overlay.append(
                $('<div></div>').addClass('ajax_loader')
            ).fadeIn(this.options.duration)
        );
    };

    this.remove = function(){
        var overlay = this.container.children(".ajax_overlay");
        if (overlay.length) {
            overlay.fadeOut(this.options.classOveride, function() {
                overlay.remove();
            });
        }   
    }

    this.init();
}   
</script>

</script>
var loader;
$(document).ajaxStart(function(){   
        loader = new ajaxLoader('body', options);
    });
var options = {
    bgColor         : '#fff',
    duration        : 800,
    opacity     : 0.7,
    classOveride    : false
}


$(document).ajaxcomplete(function(){    
            if (loader) loader.remove();
        });
</script>

for your code

<style>
.ajax_overlay {}
.ajax_loader {background: url("loading.gif") no-repeat center center transparent;width:100%;height:100%;}
</style>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
    function ajaxLoader (el, options) {
        // Becomes this.options
        var defaults = {
            bgColor         : '#fff',
            duration        : 800,
            opacity         : 0.7,
            classOveride    : false
        }
        this.options    = jQuery.extend(defaults, options);
        this.container  = $(el);

    this.init = function() {
        var container = this.container;
        // Delete any other loaders
        this.remove(); 
        // Create the overlay 
        var overlay = $('<div></div>').css({
                'background-color': this.options.bgColor,
                'opacity':this.options.opacity,
                'width':container.width(),
                'height':container.height(),
                'position':'absolute',
                'top':'0px',
                'left':'0px',
                'z-index':99999
        }).addClass('ajax_overlay');
        // add an overiding class name to set new loader style 
        if (this.options.classOveride) {
            overlay.addClass(this.options.classOveride);
        }
        // insert overlay and loader into DOM 
        container.append(
            overlay.append(
                $('<div></div>').addClass('ajax_loader')
            ).fadeIn(this.options.duration)
        );
    };

    this.remove = function(){
        var overlay = this.container.children(".ajax_overlay");
        if (overlay.length) {
            overlay.fadeOut(this.options.classOveride, function() {
                overlay.remove();
            });
        }   
    }

    this.init();
}   
</script>





<input type="file" name="myfile">
<input type="submit"  id = "upload" value="Upload">    
<div id= "loading_gif">
</div>


$(document).ready(function () {
$("#upload").click(function () {     

var loader;
$(document).ajaxStart(function(){  
        loader = new ajaxLoader('body', options);
    });
var options = {
    bgColor         : '#fff',
    duration        : 800,
    opacity     : 0.7,
    classOveride    : false
}

    $.ajax({
        type: "POST",
        url: "upload.php",
        enctype: 'multipart/form-data',
        data: {
            file: myfile
        },
        success: function () {
            alert("Data has been Uploaded: ");
           $(document).ajaxcomplete(function(){   
        if (loader) loader.remove();
    });
          }
       });
     });
  });



<?php
$temp_location = "tmp/";

if(isset($_FILES["myfile"]))
{    
  if ($_FILES["myfile"]["error"] > 0)
  {
     echo "File loading error! ";
  }
  else
  {        
    move_uploaded_file($_FILES["myfile"]["tmp_name"],
    $temp_location. $_FILES["myfile"]       ["name"]);

    //read myfile and insert data into database

    echo "File uploaded into database";
   } 
  }
?>

How to include loading gif while file upload and insert to database is in progress

3 Answers3

Linked