首页 > Web开发 > 详细

前端上传组件 - Plupload

时间:2016-01-10 13:05:25      阅读:148      评论:0      收藏:0      [点我收藏+]

效果:

  • 起始界面。

技术分享

-------------

  • 可以上上传单个文件。

技术分享

-------------

  • 可以上传多个文件。

技术分享

---------------

  • 点击上传。
  • 后台使用php接收上传来的文件。其它语言相同,都是接收上传的文件。

技术分享

 

项目结构图:

技术分享

 

代码:

upload.html代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>最基本的使用——plupload演示demo</title>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/plupload.full.min.js"></script>
	<style>
	body{ font-size: 12px;}
	body,p,div{ padding: 0; margin: 0;}
	.wraper{ padding: 30px 0;}
	.btn-wraper{ text-align: center;}
	.btn-wraper input{ margin: 0 10px;}
	#file-list{ width: 350px; margin: 20px auto;}
	#file-list li{ margin-bottom: 10px;}
	.file-name{ line-height: 30px;}
	.progress{ height: 4px; font-size: 0; line-height: 4px; background: orange; width: 0;}
	.tip1{text-align: center; font-size:14px; padding-top:10px;}
    .tip2{text-align: center; font-size:12px; padding-top:10px; color:#b00}
    .catalogue{ position: fixed; _position:absolute; _width:200px; left: 0; top: 0; border: 1px solid #ccc;padding: 10px; background: #eee}
    .catalogue a{ line-height: 30px; color: #0c0}
    .catalogue li{ padding: 0; margin: 0; list-style: none;}
    </style>
</head>
<body>
	<div class="wraper">
		<div class="btn-wraper">
			<input type="button" value="选择文件..." id="browse" />
			<input type="button" value="开始上传" id="upload-btn" />
		</div>
		<ul id="file-list">

		</ul>
	</div>
	
	<script>
		var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
			browse_button : ‘browse‘,
			url : ‘FileUpload.php‘,
			flash_swf_url : ‘js/Moxie.swf‘,
			silverlight_xap_url : ‘js/Moxie.xap‘,
		});
		
		uploader.init(); //初始化

		//绑定文件添加进队列事件
		uploader.bind(‘FilesAdded‘,function(uploader,files){
		for(var i = 0, len = files.length; i<len; i++){
				var file_name = files[i].name; //文件名
				//构造html来更新UI
				var html = ‘<li id="file-‘ + files[i].id +‘"><p class="file-name">‘ + file_name + ‘</p><p class="progress"></p></li>‘;
				$(html).appendTo(‘#file-list‘);
			}
		});

		//绑定文件上传进度事件
		uploader.bind(‘UploadProgress‘,function(uploader,file){
			$(‘#file-‘+file.id+‘ .progress‘).css(‘width‘,file.percent + ‘%‘);//控制进度条
		});

		//上传按钮
		$(‘#upload-btn‘).click(function(){
			uploader.start(); //开始上传
		});
	</script>
</body>
</html>

 

FileUplaod.php:

<?php

	print_r($_FILES);

?>

 

前端上传组件 - Plupload

原文:http://www.cnblogs.com/KTblog/p/5118181.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!