sa

最新推荐文章于 2023-08-09 09:40:48 发布

error_code

最新推荐文章于 2023-08-09 09:40:48 发布

阅读量845

点赞数

分类专栏： xml

xml 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap CSS Toolkit styles -->
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
<!-- Bootstrap CSS fixes for IE6 -->
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">

<title>jQuery File Upload Example</title>
<style>
.bar {
	height: 18px;
	background-image: url('img/progressbar.gif');
}
#center{
	margin:50px auto;
	width:400px;
}
#loading{
	width:397px;
	height:49px;
	background:url(img/bak.png) no-repeat;
}
#loading div{
	width:0px;
	height:48px;
	background:url(img/pro.png) no-repeat;
	color:#fff;
	text-align:center;
	font-family:Tahoma;
	font-size:18px;
	line-height:48px;
}
#message{
	width:200px;
	height:35px;
	font-family:Tahoma;
	font-size:12px;
	background-color:#d8e7f0;
	border:1px solid #187CBE;
	display:none;
	line-height:35px;
	text-align:center;
	margin-bottom:10px;
	margin-left:50px; 
}
</style>
</head>
<body>
	选择上传文件：<input id="fileupload" type="file" name="files" data-url="upload.action"  multiple="true">
	
	<div id="center"> 
		<div id="message"></div> 
		<div id="loading"><div></div></div> 
	</div>
	<div id="progress">
   		 <div class="bar" style="width: 0%;"></div>
	</div>
	<script
		src="upload/jquery-1.9.1.js"></script>
	<script src="js/vendor/jquery.ui.widget.js"></script>
	<script src="js/jquery.iframe-transport.js"></script>
	<script src="js/jquery.fileupload.js"></script>
	<script>
		var progress ;
		$('#fileupload').fileupload(
				{
					dataType : 'json', //返回数据类型
					add : function(e, data) {
	                    data.submit();
					},
					done : function(e, data) {
						if(progress=='100'){
							alert("上传成功");
						}
					},
					progressall : function(e, data) {
						progress = parseInt(data.loaded / data.total*100 ,10);
						 $('#progress .bar').css('width',progress + '%');
						 SetProgress(progress);
						
					}
				});
		var progress_id = "loading";
		function SetProgress(progress) {
			if (progress) {
				$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
				$("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
			}
		}
		var i = 0;
		function doProgress() {
			if (i > 100) {
				$("#message").html("加载完毕！").fadeIn("slow");//加载完毕提示
				return;
			}
			if (i <= 100) {
				setTimeout("doProgress()", 100);
				SetProgress(i);
				i++;
			}
		}
	</script>
</body>
</html>

error_code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
sa

jQuery File Upload Example.bar { height: 18px; background-image: url('img/progressbar.gif');}#center{ margin:50px auto; width:400px;}#loading{ width:397px; height:49px; background:url(img
复制链接

扫一扫