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

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 に答える