如何在文件上传和插入数据库时​​加载gif正在进行中

时间：2013-10-22 18:30:25

标签： php html ajax jquery

在读取文件并将其插入数据库之前，我必须先将文件加载到临时位置。但是我怎么能包括一个加载gif，而它做所有这些，有人可以告诉我吗？ -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";
   } 
  }
?>

3 个答案:

答案 0 :(得分：6)

我假设您有一张图片loading.gif。 将其放入img标记并将其设置为id为'loading'，然后将其隐藏。

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

您必须创建javascript函数才能显示和隐藏加载图像。这是脚本：

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

要在上传时显示加载图片，请在ajax调用之前调用showLoading()函数jus，然后在使用hideLoading()函数上传完成后隐藏它。
这是实施：

$("#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);
        }
    });
});

我知道你知道在哪里把jquery脚本放在文档中。 ：d

答案 1 :(得分：0)

现在你应该有JQUERY了。尝试将以下代码放在代码的<head>部分，这将加载jquery库

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

将隐藏的gif加载器放在你想要显示的地方

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

在页面加载时隐藏它：$('#loading_gif').hide();

现在在javascript中显示并隐藏加载程序

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

答案 2 :(得分：0)

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

代码

<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";
   } 
  }
?>
相关问题
最新问题