HTML5和jquery实现图片拖拉下传 _HTML/CSS

HTML5和jquery实现图片拖拉上传
今天跟大家一起学习的是,使用HTML5中新提供的文件API,实现从客户端用户的文件夹中,拖拉文件到你的浏览器中,然后实现文件的上传.目前HTML5中只有FIREFOX和Chrome支持这种拖拉上传功能.下面具体代码学习之:

1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.

2) index.html 代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<header>
			<h1>HTML5 File Upload with jQuery and PHP</h1>
		</header>

		<div id="dropbox">
			<span class="message">Drop images here to upload. 
<i>(they will only be visible to you)</i></span>
		</div>

        <!-- Including The jQuery Library -->
		<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

		<!-- Including the HTML5 Uploader plugin -->
		<script src="assets/js/jquery.filedrop.js"></script>

		<!-- The main script file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

其中,引入了jquery库和jquery.filedrop.js这个库,而dropbox这个DIV
是用来做拖放文件用的区域.
接下来,再放置一个区域,是显示拖放图片后,对图片进行预览,并显示上传进度条的div,如下:

<div class="preview done">

	<span class="imageHolder">
		<img src="" />
		<span class="uploaded"></span>
	</span>

	<div class="progressHolder">
		<div class="progress"></div>
	</div>

</div>

由于jquey filedrop这个插件已经帮我们做了不少东西了,所以我们只需要利用这个插件就可以了,其中asset/js/script.js代码如下:

var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 

	function createImage(file){

		var preview = $(template),
			image = $('img', preview);

		var reader = new FileReader();

		image.width = 100;
		image.height = 100;

		reader.onload = function(e){

			
			image.attr('src',e.target.result);
		};

		
		reader.readAsDataURL(file);

		message.hide();
		preview.appendTo(dropbox);

		
		$.data(file,preview);
	}

稍微解析下,这里var reader = new FileReader();

是调用了HTML5的API,然后当用户从客户端的文件夹中拖拉了一张图片到拖放区域后,
图片实际上以dataurl形式保存(实际上是BASE64编码),
    reader.readAsDataURL(file);
   这里执行后,就会触发reader.onload 事件,这里就将img的src属性设置为图片的实际内容了,即显示一张100*100的图片预览图了.
接下来,当每张图片在dropbox区域中被显示后,这个时候可以触发file drop这个插件的上传功能了,接下来看这个插件的功能代码:


  $(function(){

	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);

	dropbox.filedrop({
		//用来标识上传文件的数组名
		paramname:'pic',
                
                  //上传文件个数
		maxfiles: 5,
    	maxfilesize: 2, // 每个文件最大大小,为2MB
		url: 'post_file.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
					},

    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Your browser does not support HTML5 file uploads!');
					break;
				case 'TooManyFiles':
					alert('Too many files! Please select 5 at most!');
					break;
				case 'FileTooLarge':
					alert(file.name+' is too large! Please upload files up to 2mb.');
					break;
				default:
					break;
			}
		},

		//判断每个上传的图片是否文件格式 
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');

								return false;
			}
		},

		uploadStarted:function(i, file, len){
			createImage(file);
		},

		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}

	});

	var template = '...'; 

	function createImage(file){
		// ... see above ...
	}

	function showMessage(msg){
		message.html(msg);
	}

});

重点关注的方法为uploadStarted和progressUpdated.

而PHP部分接收文件的话,可以这样:

 if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){  

        $pic = $_FILES['pic'];  

}
 //然后自己调用PHP代码去管理上传

CSS代码为:

/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox{
	background:url('../img/background_tile_3.jpg');

	border-radius:3px;
	position: relative;
	margin:80px auto 90px;
	min-height: 290px;
	overflow: hidden;
	padding-bottom: 40px;
    width: 990px;

	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

#dropbox .message{
	font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
	color:#ccc;
	font-size:10px;
}

#dropbox:before{
	border-radius:3px 3px 0 0;
}

/*-------------------------
	Image Previews
--------------------------*/

#dropbox .preview{
	width:245px;
	height: 215px;
	float:left;
	margin: 55px 0 0 60px;
	position: relative;
	text-align: center;
}

#dropbox .preview img{
	max-width: 240px;
	max-height:180px;
	border:3px solid #fff;
	display: block;

	box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
	display: inline-block;
	position:relative;
}

#dropbox .uploaded{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
	display: none;
}

#dropbox .preview.done .uploaded{
	display: block;
}

/*-------------------------
	Progress Bars
--------------------------*/

#dropbox .progressHolder{
	position: absolute;
	background-color:#252f38;
	height:12px;
	width:100%;
	left:0;
	bottom: 0;

	box-shadow:0 0 2px #000;
}

#dropbox .progress{
	background-color:#2586d0;
	position: absolute;
	height:100%;
	left:0;
	width:0;

	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#dropbox .preview.done .progress{
	width:100% !important;
}

整个运行的DEMO为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/

代码下载地址为:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/html5-file-upload.zip

1 楼 songshuang 2011-09-29

诚挚邀请您加入ITeye HTML5群组，在这里大家可以尽情交流分享HTML5学习经验，ITeye会定期组织群组成员参加线上线下的技术交流活动和开发者聚会，有更多机会与业内HTML5牛人面对面交流，更多机会了解最新的HTML5技术发展动态！

http://html5.group.iteye.com/

2 楼 flex_莫冲 2011-09-29

学习。。。

3 楼 wangyudiwang 2012-04-25

为什么都打不开啊？