如何包括加载GIF，而文件上传并插入到数据库正在进行 [英] How to include loading gif while file upload and insert to database is in progress

问题描述

我之前，先阅读它并将其插入到数据库中加载一个文件到一个临时位置。但我怎么能包括同时其做所有这些的加载GIF，有人可以告诉我？ - 谢谢

 ＆LT;输入类型=文件名称=MYFILE＆GT;
＆LT;输入类型=提交ID =上传值=上传＆GT;
＆LT; D​​IV ID =loading_gif＆GT;
＆LT; / DIV＆GT;


$（文件）。就绪（函数（）{
$（＃上传）。点击（函数（）{

    $阿贾克斯（{
        键入：POST，
        网址：upload.php的，
        ENCTYPE：多部分/表单数据，
        数据： {
            文件：MYFILE
        }，
        成功：函数（）{
            警报（数据已上载：）;
          }
       }）;
     }）;
  }）;



＆LT; PHP
$ temp_location =TMP /;

如果（使用isset（$ _ FILES [MYFILE]））
{
  如果（$ _FILES [MYFILE] [错误] 0）
  {
     回声文件加载错误！
  }
  其他
  {
    move_uploaded_file（$ _ FILES [MYFILE] [tmp_name的值]，
    $ temp_location。 $ _FILES [MYFILE] [名称]）;

    //读取MYFILE并且将数据插入到数据库

    回声文件上传到数据库;
   }
  }
？＆GT;
 

解决方案

我假设你有一个形象 loading.gif 。 把它放到 IMG 标签，并设置它的 ID 来加载，然后使它不可见。

 ＆LT; IMG ID ='装'SRC ='loading.gif风格=能见度：隐藏;＆GT;
 

您必须创建JavaScript函数来显示和隐藏加载图像。这里的脚本：

 ＆LT;脚本＆GT;
功能showLoading（）{
。的document.getElementById（装载）的风格=能见度：看得见;
}
功能hideLoading（）{
。的document.getElementById（装载）的风格=能见度：隐藏;
}
＆LT; / SCRIPT＆GT;
 

要显示，当您上载的加载图像，调用Ajax调用之前的 showLoading（）函数强制，然后隐藏它，当你完成了<$上传C $ C> hideLoading（）功能。
这里的实现：

  $（＃上传）。点击（函数（）{
    //调用显示加载函数在这里
    showLoading（）;
    $阿贾克斯（{
        键入：POST，
        网址：upload.php的，
        ENCTYPE：多部分/表单数据，
        数据： {
            文件：MYFILE
        }，
        成功：函数（）{
            //调用隐藏功能在这里
            hideLoading（）;
            警报（数据已上载：）;
        }，
        错误：功能（一）{//如果发生错误
            hideLoading（）;
            警报（同时上传数据时出错。\ n错误code：+ a.statusText）;
        }
    }）;
}）;
 

和我知道你知道，你必须把jQuery脚本在矿井的文件。 ：D

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

解决方案

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

这篇关于如何包括加载GIF，而文件上传并插入到数据库正在进行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！