Arc*_*ger 4 html php ajax jquery
在读取文件并将其插入数据库之前,我必须先将文件加载到临时位置.但是我怎么能包括一个加载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>
要在上传时显示加载图像,请在showLoading()ajax调用之前调用函数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();
}