5

在读取文件并将其插入数据库之前，我必须先将文件加载到临时位置。但是，我如何在执行所有这些操作时包含加载 gif，有人可以告诉我吗？-谢谢

<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";
   } 
  }
?>
4

3 回答 3

6

我假设你有一个图像loading.gif。将其放入img标签并将其设置id为“加载”，然后使其不可见。

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

要在上传时显示加载图像，请showLoading()在 ajax 调用之前调用该函数，然后在使用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

于 2013-10-23T05:06:35.850 回答
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";
   } 
  }
?>
于 2013-10-22T20:16:32.260 回答
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();    
}
于 2013-10-22T18:39:52.250 回答