WebUploader实例

最新推荐文章于 2024-07-16 14:48:25 发布

here962464

最新推荐文章于 2024-07-16 14:48:25 发布

阅读量2.3k

点赞数 1

分类专栏：前端框架

本文链接：https://blog.csdn.net/here962464/article/details/91374436

版权

前端框架专栏收录该内容

19 篇文章 0 订阅

订阅专栏

我觉得很棒：https://fex.baidu.com/webuploader/

这是一整个静态页面的实例：界面长这样：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div id="uploader" class="uploader">
	    <div class="btns">
	        <div id="filePicker" class="choose_file">选择文件</div>
	        <button id="upload_btn" class="btn btn-default" style="display: none;">开始上传</button>
	    </div>
	    <!--用来存放文件信息-->
	    <div>
			<table class="info_table">
				<thead>
					<tr>
						<th class="no_border">序号</th>
						<th>文件名称</th>
						<th>文件大小</th>
						<th>上传进度</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="file_list" class="file_list">
					
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="webuploader.withoutimage.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var self = this;
			this.uploader = null;
			// 可能有pedding, ready, uploading, confirm, done.
			this.state = 'ready',
			this.$btn = $("#upload_btn");
			// 插件注册
			this.creatUploader = function(){

				// 实例化
			    self.uploader = WebUploader.create({
			        pick: {
			            id: '#filePicker',
			        	multiple:true
			        },
			        dnd: '#file_list',
			        accept: {
			            title: 'File',
			            extensions: 'doc,docx'
			        },
			        // 同时上传个数
			        threads: true,
			        // swf文件路径
			        swf:'Uploader.swf',
			        // 去重
			        duplicate:true,
			        server: 'http://2betop.net/fileupload.php'
			    });
			    // 添加文件选择按钮
			    self.uploader.addButton({
				    id: '#btnContainer',
				    innerHTML: '选择文件'
				});
				// 当一批文件添加进队列以后触发
				self.uploader.on( 'filesQueued', function(file) {
					$("#upload_btn").show();
				    self.createDom(file);
				    $(".webuploader-pick").html("继续添加");
				});
			    // 开始上传
				self.$btn.on('click', function() {
					if($(this).html() == "开始上传"){
			        	self.uploader.upload();
			        	$(this).html("暂停");
					}else{
						self.uploader.stop();
			        	$(this).html("开始上传");
					}
			    });
			     // 文件上传过程中创建进度条实时显示。
			    self.uploader.on( 'uploadProgress', function( file, percentage ) {
			    	var $tr = $( '#'+file.id ).find(".file_pro"),
			            $percent = $tr.find('.progress .progress-bar');
			        // 避免重复创建
			        if ( !$percent.length ) {
			            $percent = $('<div class="progress progress-striped active">' +
			              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
			              '</div>' +
			              '<span class="percent">'+ percentage * 100 + '%' +'</span>'+
			            '</div>').appendTo($tr).find('.progress-bar');
			        }
			        // 隐藏文字   只显示进度条和百分比
			        $tr.find('p.state').hide();
			        $percent.css( 'width', percentage * 100 + '%' );
			    });  
			    // 上传出错
			    self.uploader.on('uploadError',function(file,reason){
			    	var $tr = $( '#'+file.id ),
			    		$delete = $tr.find(".delete"),
			            $percent = $tr.find('.file_pro .progress .progress-bar');
			    	$percent.hide();
			    	$delete.html("");
		        	$tr.find('span.percent').hide();
		        	$tr.find('p.state').show();
		        	$tr.find('p.state').html("上传失败！");
		        	$tr.find('p.state').css("color","#FB635D");
			    });
			    // 上传成功
			    self.uploader.on('uploadSuccess',function(file,response){
			    	var $tr = $( '#'+file.id ),
			    		$delete = $tr.find(".delete"),
			            $percent = $tr.find('.file_pro .progress .progress-bar');
			    	$percent.hide();
			    	$delete.html("");
		        	$tr.find('span.percent').hide();
		        	$tr.find('p.state').show();
		        	$tr.find('p.state').html("上传成功！");
		        	$tr.find('p.state').css("color","rgb(52, 200, 74)");
			    });
			    //当文件被移除队列后触发
			    self.uploader.on('fileDequeued',function(file){
			    	self.removeFile(file);
			    });
			};
			// 当有文件添加进来时执行，负责view的创建
			this.createDom = function(file){
				var str;
				for(var i=0;i<file.length;i++){
					// 创建序号
					var id = Number(file[i].id.replace(/[^0-9]+/g, ''))+1;
					if(id<10){
						id="0"+id;
					}
					str = '<tr id="'+file[i].id+'">'
						+'<td class="list_id">' + id + '</td>'
						+'<td class="file_name">' + file[i].name + '</td>'
						+'<td class="file_size">'+self.getfilesize(file[i].size)+'</td>'
						+'<td class="file_pro">'
							+'<p class="state">等待上传...</p>'
						+'</td>'
						+'<td class="delete" data-id="'+file[i].id+'">删除</td>'
					+'</tr>';
					$("#file_list").append(str);
				}
			    $(".delete").on("click",function(){
			    	var id = $(this).attr('data-id');
			    	self.uploader.removeFile(id,true);
			    })
			};
			self.removeFile = function(file){
				$('#'+file.id).remove();
			}
			// 字节转KB方法
			this.getfilesize = function(size){
				if (!size)
					return "";
				var num = 1024.00; //byte
				if (size < num)
					return size + "B";
				if (size < Math.pow(num, 2))
					return (size / num).toFixed(2) + "KB"; //kb
				if (size < Math.pow(num, 3))
					return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
				if (size < Math.pow(num, 4))
					return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
				return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
			}
		    // 入口函数
		    this.init = function(){
		    	this.creatUploader();
		    };
		    this.init();
		});
	</script>
</body>
</html>

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
	background: rgb(212, 231, 248);
}
.uploader{
	width: 90%;
	margin-left: 5%;
	color: #333;
}
.btns{
	width: 100%;
	background: #fff;
	margin: 20px 0;
	padding: 10px 0;
}
.info_table{
	width: 100%;
	text-align: center;
	font-size: 13px;
	margin: 20px 0;
}
.info_table th{
	background-color: rgb(39, 128, 228);
	border-left: 1px solid #fff;
	padding: 18px 0px;
	color: #FFF;
}
.info_table th.no_border{
	border: none;
}
.info_table tr{
	background: #fff;
	padding: 5px 10px;
}
.info_table tr:nth-child(even) {
    background: rgb(234, 243, 252);
}
.info_table td{
	padding: 18px 0px;
	border:1px solid rgb(221, 221, 221);
}
.info_table td.file_name{
	text-align: left;
	text-indent: 20px;
	width: 36%;
}
.info_table td.file_pro{
	text-align: left;
	text-indent: 20px;
	width: 36%;
}
.delete{
	cursor: pointer;
	color: #FB635D;
}
.progress-bar{
	height: 25px;
	background: #ccc;
	border-radius: 4px;
}


.webuploader-container {
	position: relative;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
	position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 9px 12px;
    color: rgb(52, 200, 74);
    text-align: center;
    border-radius: 3px;
    font-size: 14px;
	border:1px solid rgb(52, 200, 74);
	background: #fff;
}
.choose_file{
	display: inline-block;
	margin: 0 20px;
}
.webuploader-pick-hover {
	background: rgb(52, 200, 74);
    color: #fff;
}
.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.btn-default {
	background: rgb(52, 200, 74);
    color: #fff;
}

webuploader.withoutimage.min.js下载地址：https://fex.baidu.com/webuploader/download.html

here962464

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
WebUploader实例

我觉得很棒：https://fex.baidu.com/webuploader/这是一整个静态页面的实例：界面长这样：HTML代码：<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href=...
复制链接

扫一扫

专栏目录