`
liufei.fir
  • 浏览: 686239 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用 jQuery progressBar 做文件上传的进度条指示

阅读更多
var progress_key = '4cd0f29463edb';
 
// this sets up the progress bar
$(document).ready(function() {
    $("#uploadprogressbar").progressBar();
});
 
// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
    // uses ajax to poll the uploadprogress.php page with the id
    // deserializes the json string, and computes the percentage (integer)
    // update the jQuery progress bar
    // sets a timer for the next poll in 750ms
    $("#uploadprogressbar").fadeIn();
 
    var i = setInterval(function() { 
        $.getJSON("demo.php?id=" + progress_key, function(data) {
            if (data == null) {
                clearInterval(i);
                location.reload(true);
                return;
            }
 
            var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
            $("#uploadprogressbar").progressBar(percentage);
        });
    }, 1500);
}
<?php
	header("Cache-Control: no-cache, must-revalidate");
	header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

	if (@$_GET['id']) {
		echo json_encode(uploadprogress_get_info($_REQUEST['id']));
		exit();
	}

	if (@$_POST['UPLOAD_IDENTIFIER'])
		exit();
	
	$uuid = uniqid();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Jquery WITS Form</title>
	    <link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/reset.css"/>
	    <link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/base.css"/>
	    <link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/template.css"/>
	    <link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/form.css"/>
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
			</script>
			<script type="text/javascript">
			try {
			var pageTracker = _gat._getTracker("UA-1120774-3");
			pageTracker._trackPageview();
			} catch(err) {}
		</script>
		<script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/jquery.js"></script>
		<script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/chili/jquery.chili-2.2.js"></script>
		<script type="text/javascript"> 
			ChiliBook.recipeFolder = "../js/jQuery/chili/";  
		</script>
		<script type="text/javascript" src="js/jquery.progressbar.min.js"></script>
		<script type="text/javascript">
			var progress_key = '<?= $uuid ?>';

			$(document).ready(function() {
				$("#pb1").progressBar();
				$("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
				$("#pb3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
				$("#pb4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
				$(".pb5").progressBar({ max: 2000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Callback example: Target reached!"); } }} );
				$("#uploadprogressbar").progressBar();
			});

			function beginUpload() {
				$("#uploadprogressbar").fadeIn();

				var i = setInterval(function() { 
					$.getJSON("demo.php?id=" + progress_key, function(data) {
						if (data == null) {
							clearInterval(i);
							location.reload(true);
							return;
						}

						var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
						$("#uploadprogressbar").progressBar(percentage);
					});
				}, 1500);

				return true;
			}
		</script>
		<style type="text/css">
			table tr { vertical-align: top; }
			table td { padding: 3px; }
			div.contentblock { padding-bottom: 25px; }	
			#uploadprogressbar { display: none; }
		</style>
	</head>
	<body>
		<div id="container">
			<div style="float: right; text-align: right; width: 300px;">download me at <a href="http://t.wits.sg">http://t.wits.sg</a></div>
			<div class="contentblock">
				<h2>Progress Bars &amp; Controls</h2>
				<table>
					<tr><td>Default Multicolored Bar</td><td><span class="progressBar" id="pb1">75%</span></td></tr>
					<tr><td>Yellow Bar</td><td><span class="progressBar" id="pb2">35%</span></td></tr>
					<tr><td>Orange Bar (No Text)</td><td><span class="progressBar" id="pb3">55%</span></td></tr>
					<tr><td>Red Bar (No Text)</td><td><span class="progressBar" id="pb4">85%</span></td></tr>
					<tr><td>Default Multicolored Bar with max value of 2000</td><td><span class="progressBar pb5">32</span></td></tr>
				</table>
				<strong>Some controls: </strong>
				<a href="#" onclick="$('#pb1').progressBar(20);">20</a> |
				<a href="#" onclick="$('#pb1').progressBar(40);">40</a> |
				<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
				<a href="#" onclick="$('#pb1').progressBar(80);">80</a> |
				<a href="#" onclick="$('#pb1').progressBar(100);">100</a>
			</div>

			<div class="contentblock">
				<h2>Usage: </h2>
<pre class="ln-"><code class="js">
$(document).ready(function() {
	$("#pb1").progressBar();
	$("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
	$("#pb3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
	$("#pb4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
	$(".pb5").progressBar({ max: 2000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Callback example: Target reached!"); } }} );
	$("#uploadprogressbar").progressBar();
});
</code></pre>
			
			</div>
			<div class="contentblock">
				<h2>Progress Bars Form Example</h2>
				<a href="demo.txt">Download the PHP Source here</a>
				<div class="edit_panel">
					<form action="demo.php" target="progressFrame" method="post" id="uploadform" enctype="multipart/form-data" onsubmit="beginUpload();">
						<input type="hidden" name="UPLOAD_IDENTIFIER" id="progress_key" value="<?= $uuid ?>" />
						<table class="form">
							<tr><td class="labelcol"><label for="firstname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="firstname" id="firstname" class="text" /></td></tr>
							<tr><td class="labelcol"><label for="lastname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="lastname" id="lastname" class="text" /></td></tr>
							<tr><td class="labelcol"><label for="password">First Name</label><em>*</em></td><td class="inpulcol"><input type="password" name="password" id="password" class="text" /></td></tr>
							<tr><td class="labelcol"><label for="ulfile1">File 1</label></td>
							    <td><input type="file" name="ulfile1" id="ulfile1" /></td>
							</tr>
							<tr><td class="labelcol"><label for="ulfile2">File 2</label></td>
							    <td><input type="file" name="ulfile2" id="ulfile2" /></td>
							</tr>
							<tr><td class="labelcol"><label for="ulfile3">File 3</label></td>
							    <td><input type="file" name="ulfile3" id="ulfile3" /></td>
							</tr>
							<tr><td class="labelcol"></td>
								<td class="inputcol"><input type="submit" value="Submit" />
								<br />
								<span class="progressbar" id="uploadprogressbar">0%</span>	
							</td></tr>
						</table>
					</form>
				</div>
			</div>
			
			<div class="contentblock">
				<h2>Upload Form Javascript: </h2>
<pre class="ln-"><code class="js">
var progress_key = '<?= $uuid ?>';

// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});

// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	// uses ajax to poll the uploadprogress.php page with the id
	// deserializes the json string, and computes the percentage (integer)
	// update the jQuery progress bar
	// sets a timer for the next poll in 750ms
	$("#uploadprogressbar").fadeIn();

	var i = setInterval(function() { 
		$.getJSON("demo.php?id=" + progress_key, function(data) {
			if (data == null) {
				clearInterval(i);
				location.reload(true);
				return;
			}

			var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
			$("#uploadprogressbar").progressBar(percentage);
		});
	}, 1500);
}
</code></pre>
			</div>
		</div>
		<!-- Ok, you so need this iframe for Safari and Chrome to work, the webkit engine doesnt allow ajax calls to be made after a form begins submission -->
		<iframe style="display: none;" name="progressFrame"></iframe>
	</body>
</html>
分享到:
评论

相关推荐

    jQuery progressbar进度条插件提示进度条进度百分比数据

    在本文中,我们将深入探讨如何使用jQuery的progressbar插件来创建一个动态的进度条效果,并在用户鼠标滑过时展示进度的百分比数据。jQuery是一个轻量级的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果,...

    jquery progressBar 进度条

    在实际应用中,`jquery progressBar`常与异步操作结合,如文件上传、数据加载等场景。当后台任务执行时,通过Ajax请求获取进度信息,并更新进度条的状态,以显示实时进度。 总结来说,`jquery progressBar`是jQuery...

    jquery 进度条

    进度条常用于实时更新任务进度,例如文件上传或数据下载。确保插件能够响应Ajax请求,根据返回的进度信息动态更新进度条。同时,进度条应适应各种屏幕尺寸,符合响应式设计原则。 8. **事件绑定和回调函数** 许多...

    jQuery响应式流程步骤进度条插件.zip

    本压缩包包含了一个基于jQuery的响应式流程步骤进度条插件,可用于创建具有吸引力且适应不同屏幕尺寸的进度指示器。 该插件的核心特性是其响应式设计,意味着无论在桌面、平板还是手机设备上,都能自适应地展示,...

    servlet+jquery实现文件上次进度条

    "servlet+jquery实现文件上传进度条"这个主题正是为了改善这一情况,通过结合Java的Servlet技术和JavaScript的jQuery库,为用户提供了可视化的文件上传进度指示。 Servlet是Java服务器端编程的基础,它在Web应用中...

    jquery 实现的进度条插件

    本篇文章将详细讲解如何利用jQuery实现一个进度条插件,以及其在程序进度显示和AJAX文件上传中的应用。 首先,进度条插件的核心功能是动态展示一个过程的完成度,它可以是一个下载、上传、渲染或其他耗时操作的状态...

    jquery生成的进度条

    在给出的文件名列表中,我们看到有"UploadFileWithProgressBar.rar",这表明我们将讨论如何在文件上传过程中使用jQuery实现进度条。文件上传通常是一个耗时的操作,进度条能够告知用户文件传输的进度,防止用户认为...

    Jquery插件-垂直进度条

    在实际应用中,垂直进度条可能被用于多种场景,比如文件上传进度指示、视频缓冲状态显示、游戏进度追踪等。为了使用这个jQuery插件,你需要在HTML中引入jQuery库和插件的JavaScript及CSS文件,然后按照插件文档中的...

    jquery.progressbar.2.0.zip

    要使用该插件,你需要在HTML文件中引入jQuery库和ProgressBar的CSS及JS文件。一旦这些资源加载完成,就可以通过jQuery的选择器找到目标元素,然后调用`.progressbar()`方法来初始化进度条。 ```html &lt;script src="...

    jQuery 进度条

    例如,使用`jQuery UI Progressbar`,首先引入库文件,然后初始化进度条: ```javascript $("#progressbar").progressbar({ value: 0 }); // 更新进度 $("#progressbar").progressbar("value", 50); ``` 5. ...

    jQuery带开关控制的进度条动画代码

    本主题聚焦于使用jQuery实现一个带有开关控制的进度条动画。这样的功能在网页应用中非常常见,比如加载指示、任务进度显示等。 首先,我们需要了解进度条的基本概念。进度条是一种可视化元素,用于显示某个过程的...

    jQuery进度条jquery-progressbar.zip

    jquery-progressbar 是一个显示在页面上滚动的进度指示器插件,它跟 YouTube 进度条相似。当页面加载时,YouTube 的页面进度条能指示,但是这个插件能在页面滚动时显示。 标签:jquery

    基于 jQuery的JProgressBar Demo文件加载进度条演示效果1.0.zip

    通常,jQuery库可以从CDN(内容分发网络)获取,而`JProgressBar`的脚本文件则需要解压`基于 jQuery的JProgressBar Demo文件加载进度条演示效果1.0.zip`压缩包后获取。 ```html &lt;script src="https://code.jquery....

    非常实用的jquery进度条

    在实际使用中,开发者需要在HTML页面中引入jQuery库和这个"progressbar"文件,然后通过JavaScript代码实例化进度条并配置其行为。例如: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery....

    jQuery-带节点步骤进度条插件

    要使用这个jQuery步骤进度条插件,首先需要在HTML文件中引入jQuery库和该插件的JS及CSS文件。通常,你可以通过CDN(内容分发网络)链接来引入,或者下载到本地项目中。例如,你可以在`&lt;head&gt;`标签内添加以下代码: ...

    jQuery实现的点击上传出现进度条动画特效源码.zip

    本资源“jQuery实现的点击上传出现进度条动画特效源码.zip”显然是一个利用jQuery来创建文件上传时进度条动画效果的代码示例。下面,我们将深入探讨这个主题,以及如何实现这样的功能。 首先,让我们理解上传进度条...

    jQuery进度条插件

    5. **插件集成**:对于更复杂的用例,开发者可以选择使用现成的jQuery进度条插件,如`jquery-ui-progressbar`、`bootstrap-progressbar`等。这些插件提供丰富的配置选项和预设样式,可快速实现美观且功能齐全的...

    jquery progress bar进度条插件,投票进度条系统

    3. **使用jQuery**:在DOM加载完成后,通过`$("#progressBar").progressbar()`初始化进度条组件。 4. **设置值**:通过`.progressbar("value", value)`方法来设置进度条的当前值,其中`value`为0到100之间的整数。 ...

    简单的jQuery上传进度条代码

    在本文中,我们将深入探讨如何使用jQuery实现一个简单的上传进度条功能。这个功能通常用于增强用户体验,让用户在文件上传过程中能够清晰地看到进度,从而提高交互性和反馈效果。标题所提及的"简单的jQuery上传...

    JQuery进度条

    要使用jQuery进度条,首先需要在页面中引入jQuery库和进度条插件的JavaScript及CSS文件。通常,这些文件可以从官方仓库或者CDN获取。例如,对于jQuery UI的进度条插件,可以使用以下代码引入: ```html ...

Global site tag (gtag.js) - Google Analytics