使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

昨天我们介绍了一款HTML5文件上传的jQuery插件：jQuery HTML5 uploader，今天我们将开发一个简单的叫upload center的图片上传程序，允许用户使用拖拽方式来上传电脑上的图片，使用现在浏览器支持新的HTML5 API。

 

图片将会有一个预览和进度条，都由客户端控制。目前，图片都保存在服务器上的一个目录里，当然你可以自己加强相关功能。

 

在线演示  在线下载

 

 

什么是HTML文件上传？

使用HTML5上传文件其实综合使用了3种技术，新的File Reader API，还有新的Drag&Drop API，以及AJAX技术（包含2进制的数据传输）。这里是一个简单HTML5文件的描述：

 

1. 用户拖放一个或者多个文件到浏览器的窗口。支持Drap&Drop API的浏览器将会触发一个事件，以及相关的其它信息，包括一个拖拽文件列表。

2. 使用File Reader API， 我们以2进制方式读取文件，保存在内存中。

3. 使用XMLHttpRequest的新sendAsBinary方法 ，发送文件数据到服务器。

 

听起来是不是有点复杂？是的，可以使用一些优化。幸运的是，这里有些jQuery的插件可以帮助我们。其中有个插件叫Filedrop，是一个实现这个功能的插件，提供了限制最大文件体积和指定擦llback的特性，这些特性对于你整合这些功能非常有帮助。

 

目前文件上传功能只能在Firefox和Chrome上正常工作，但是将发布的主流浏览器也会支持这些功能。一个简单的fallback解决方案是显示一个一般的文件上传对话框。但是今天我们这里例子讲不这样设计，我们专注于HTML5的使用。

 

我们开始正式开发！

 

HTML代码

这个上传程序的html非常简单。我们使用一个一般的HTML5文档，包括了script.js文件，Filedrop插件和jQuery类库。

 

index.html

    
        
        

        
        

        
    

    

		

			
HTML5 File Upload with jQuery and PHP
		

		

			Drop images here to upload. 
(they will only be visible to you)
		

        
		

		
		

		
        

    

 

和Filedrop有关的唯一一个div是#dropbox。我们将这个元素传入插件。插件将会判断是否一个文件被拖放到上面。当发现有错误的时候信息span将会被更新（例如，如果浏览器不支持和这个应用有关的HTML5 API的时候）。

 

 

最后，当你拖放一个文件，我们的jQuery代码将会显示一个预览，如下：

 

以上代码片断包含了一个图片预览和一个进度条。整个预览带有".done" class，可以让".upload" span显示。这个span将有绿色的背景标示，暗示上传完成了。

 

接下来，我们看看script.js文件！

 

jQuery代码

所有的实际文件传送功能都由Filedrop插件完成，我们只是简单的调用并且设置擦llback，因此我们可以直接使用。我们将在下一个部分书写一个PHP脚本处理服务器段的文件上传功能。

 

第一个步骤是书写一个辅助功能接受一个文件对象（一个特别的由浏览器创建的对象，包含名字，路径和大小）。以及预览的标签。

var template = '
'+
						''+
							''+
							''+
						''+
						'
'+
							'
'+
						'
'+
					'
'; 

	function createImage(file){

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

		var reader = new FileReader();

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

		reader.onload = function(e){

			// e.target.result holds the DataURL which
			// can be used as a source of the image:

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

		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);

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

		// Associating a preview container
		// with the file, using jQuery's $.data():

		$.data(file,preview);
	}

 

template变量包含了HTML5的预览标签。我们得到图片的DataURL并且添加为图片源。每一个都被添加到dropbox容器里。

 

现在我们调用filedrop插件：

$(function(){

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

	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',

		maxfiles: 5,
    	maxfilesize: 2, // in mb
		url: 'post_file.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
		},

    	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;
			}
		},

		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image//)){
				alert('Only images are allowed!');

				// Returning false will cause the
				// file to be rejected
				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);
	}

});

 

使用这个，每一个正确的图片文件被拖放到#dropbox div都会被上传到post_file.php。

 

PHP Code

PHP这边的代码，和一般的表单上传没有太多区别。 这意味着你可以简单的提供fallback来重用后台功能。

// If you want to ignore the uploaded files,
// set $demo_mode to true;

$demo_mode = false;
$upload_dir = 'uploads/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error! Wrong HTTP method!');
}

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

	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
	}	

	if($demo_mode){

		// File uploads are ignored. We only log them.

		$line = implode('		', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
		file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);

		exit_status('Uploads are ignored in demo mode.');
	}

	// Move the uploaded file from the temporary
	// directory to the uploads folder:

	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File was uploaded successfuly!');
	}

}

exit_status('Something went wrong with your upload!');

// Helper functions

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}

 

这段代码运行一些http检查，并且验证文件扩展。我们不想保存任何文件，所以这个我们直接删除。

 

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;
}

 

.progress div是绝对定位的。修改width用来做一个自然进度的标示。使用0.25 突然四体on，你会看到一个动画的增量效果。

 

全部代码完毕。

 

大家可以用这个教程做为HTML5的文件上传服务的起点。有任何建议或者评论，只给我们在下方留言。

 

via 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

 

来源： http://www.starming.com/index.php?action=plugin&v=wave&tpl=union&ac=viewgrouppost&gid=34464&tid=17975