我必须先将文件加载到临时位置，然后再读取文件并将其插入数据库。但是，在执行所有这些操作时，我如何包含加载 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";
}
}
?>
我假设你有一个图像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>
要在上传时显示加载图像，请在 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
现在你应该有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();
}
<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";
}
}
?>