一個(gè)簡單的ajax上傳進(jìn)度顯示示例
更新時(shí)間：2014年02月21日 16:27:52 作者：
這篇文章主要介紹了一個(gè)簡單的ajax上傳進(jìn)度顯示示例,需要的朋友可以參考下
本例用了jquery.form.js請(qǐng)到演示頁面查看
CSS Code
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
XML/HTML Code
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<div id="message"></div>
JavaScript Code
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
upload.php
<?php
$output_dir = "../upload/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
echo "Uploaded File :".$_FILES["myfile"]["name"];
}
}
?>
CSS Code
復(fù)制代碼 代碼如下:
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
XML/HTML Code
復(fù)制代碼 代碼如下:
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<div id="message"></div>
JavaScript Code
復(fù)制代碼 代碼如下:
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
upload.php
復(fù)制代碼 代碼如下:
<?php
$output_dir = "../upload/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
echo "Uploaded File :".$_FILES["myfile"]["name"];
}
}
?>
您可能感興趣的文章:
- AJAX和JSP實(shí)現(xiàn)的基于WEB的文件上傳的進(jìn)度控制代碼
- AJAX 進(jìn)度條實(shí)現(xiàn)代碼
- ajax+php打造進(jìn)度條 readyState各狀態(tài)
- ajax+php打造進(jìn)度條代碼[readyState各狀態(tài)說明]
- 讓ajax更加友好的實(shí)現(xiàn)方法(實(shí)時(shí)顯示后臺(tái)處理進(jìn)度。)
- ajax提交加載進(jìn)度條示例代碼
- php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
- jquery+php+ajax顯示上傳進(jìn)度的多圖片上傳并生成縮略圖代碼
- jsp+ajax發(fā)送GET請(qǐng)求的方法
- jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
- asp.net+ajax的Post請(qǐng)求實(shí)例
- 服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求
- 解決ajax跨域請(qǐng)求數(shù)據(jù)cookie丟失問題
- django通過ajax發(fā)起請(qǐng)求返回JSON格式數(shù)據(jù)的方法
- Ajax在請(qǐng)求過程中顯示進(jìn)度的簡單實(shí)現(xiàn)
相關(guān)文章
解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法
這篇文章主要介紹了解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法，感興趣的小伙伴們可以參考一下2016-01-01
Ajax實(shí)現(xiàn)頁面自動(dòng)刷新實(shí)例解析
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。接下來通過本文給大家介紹Ajax實(shí)現(xiàn)頁面自動(dòng)刷新實(shí)例解析，感興趣的朋友一起看看吧2016-04-04
淺析Ajax后臺(tái)success傳來json數(shù)據(jù)的問題
最近在使用JQuery的ajax方法時(shí)，需要返回的數(shù)據(jù)為json數(shù)據(jù)，在success返回中數(shù)據(jù)處理會(huì)根據(jù)返回方式不同會(huì)采用不同的方式來生成json數(shù)據(jù)。下面小編給大家介紹下在$.ajax方法中應(yīng)該是如何來處理的2016-10-10
ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了ajax三級(jí)聯(lián)動(dòng)下拉菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
AJAX 是一種與服務(wù)器交換數(shù)據(jù)的技術(shù)，可以在補(bǔ)充在整個(gè)頁面的情況下更新網(wǎng)頁的一部分。接下來通過本文給大家介紹ajax一些常用方法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
jquery1.8版本使用ajax實(shí)現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法
這篇文章主要介紹了jquery1.8版本使用ajax實(shí)現(xiàn)微信調(diào)用出現(xiàn)的問題分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2015-11-11
Ajax與JSON的一些學(xué)習(xí)總結(jié)
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡稱XHR），可以通過使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式2012-08-08
下面是一些常見ajax的一些屬性與方法，大家一定要熟練掌握。2009-03-03
Ajax實(shí)現(xiàn)無刷新分頁實(shí)例代碼
這篇文章主要介紹了Ajax實(shí)現(xiàn)無刷新分頁實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
Ajax 程序開發(fā)中常見問題，利用大家快點(diǎn)的找到問題所在，快速解決問題。2009-08-08