`

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
6
0
分享到:
评论
3 楼 wangyudiwang 2012-04-25  
为什么都打不开啊?
2 楼 flex_莫冲 2011-09-29  
学习。。。
1 楼 songshuang 2011-09-29  
诚挚邀请您加入ITeye HTML5群组,在这里大家可以尽情交流分享HTML5学习经验,ITeye会定期组织群组成员参加线上线下的技术交流活动和开发者聚会,有更多机会与业内HTML5牛人面对面交流,更多机会了解最新的HTML5技术发展动态!

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

相关推荐

    jquery实现图片即时上传

    总结来说,`jQuery`实现图片即时上传的核心在于利用HTML5的File API和Ajax技术,结合`FormData`对象进行数据传输,同时针对旧版IE提供相应的兼容方案。这样的实现方式既能提供良好的用户体验,又能确保跨浏览器的...

    html5+jquery+canvas 实现调用手机拍照上传图片

    在`canvasDemo-master`这个项目中,可能包含了实现上述功能的HTML、CSS和JavaScript代码,通过分析和学习这个示例,你可以深入理解如何结合HTML5、jQuery和Canvas来处理图片上传和旋转问题,这对于构建交互性强的...

    php+html+jquery实现图片裁剪上传

    在本文中,我们将深入探讨如何使用PHP、HTML和jQuery实现图片裁剪并上传的功能。这一技术在现代Web应用中非常常见,特别是在用户需要上传个人头像或者产品图片时,允许他们自定义裁剪区域可以极大地提升用户体验。 ...

    jQuery实现的对上传图片进行裁剪插件

    这个“jQuery实现的对上传图片进行裁剪插件”就是为了满足这样的需求而设计的。下面将详细阐述这个插件的工作原理、功能特性以及使用方法。 首先,该插件基于JavaScript库jQuery构建,它允许开发者在客户端(用户的...

    PHP jQuery html5头像图片选取上传 v1.1.rar

    PHP jQuery html5头像图片选取上传是一款使用HTML5 jquery实现的PHP图片截取及上传功能,可广泛应用于头像图片裁切上传中,HTML5环境,可方便移植到手机APP中使用。 PHP jQuery html5头像图片选取上传使用方法 ...

    PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

    在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,有bug留言,一般当天改完上传。 转自:素材火jQuery教程演示:http://www.sucaihuo.com/js/71.html

    jquery批量上传图片插件

    在IT行业中,jQuery是一个非常流行的JavaScript库...总的来说,"jQuery批量上传图片插件"是一个实用的工具,它结合了jQuery的便利性和文件上传的复杂性,为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。

    jquery实现多附件上传

    在jQuery中实现多附件上传,通常会结合HTML5的新特性,如`&lt;input type="file"&gt;`元素的`multiple`属性,以及Ajax技术来实现实时上传进度和无刷新页面的体验。以下是一些关键的知识点: 1. **HTML5 File API**:HTML5...

    jquery的拖拉布局

    本文将深入探讨如何利用jQuery实现拖拉布局,并分享相关知识点。 ### 1. jQuery UI中的Draggable和Droppable jQuery UI库扩展了jQuery的功能,提供了Draggable和Droppable两个插件,分别用于实现元素的拖动和放置...

    基于bootstrap图片上传_jquery支持多张上传

    5. **AJAX异步上传**:利用jQuery的AJAX功能,可以实现无刷新的图片上传,用户可以选择图片后立即看到上传进度,提高用户体验。在上传过程中,通常会显示上传进度条,以及成功或失败的反馈信息。 6. **图片预览功能...

    jquery-Jcrop实现图片裁剪截图上传和保存

    `jQuery Jcrop`是一个流行的JavaScript库,它允许用户在浏览器端进行图像选择、裁剪和截图操作,进而实现上传到服务器并保存。这个库是基于jQuery构建的,因此可以方便地与现有的jQuery应用集成,提供了丰富的API和...

    jQuery实现图片预览功能

    接下来,我们引入jQuery库(这里使用的是CDN链接)和自定义的`imagePreview.js`脚本,这个脚本将包含实现图片预览功能的代码。 在`js/imagePreview.js`文件中,我们可以编写以下JavaScript代码: ```javascript $...

    jQuery+HTML5实现图片上传前预览效果

    jQuery+HTML5实现图片上传前预览效果,代码简洁,方便使用。

    jquery拖拽上传_拖拽上传图片_jquery_

    以上代码和步骤展示了如何使用jQuery实现一个简单的图片拖拽上传功能。请注意,实际应用中可能还需要考虑错误处理、进度指示、多文件上传、文件大小限制等功能。在开发过程中,请确保遵循最佳实践,如防止XSS攻击、...

    jquery实现html5图片上传rar

    "jQuery实现HTML5图片上传rar"这个主题就是关于如何利用jQuery库和HTML5的新特性来创建一个图片上传功能,特别是针对RAR文件的处理。在这个过程中,我们将深入探讨以下几个关键知识点: 1. **HTML5 File API**:...

    JQuery+ajax实现批量上传图片

    ### JQuery与Ajax结合实现批量图片上传的技术解析 在现代网页开发中,用户界面的互动性和数据处理效率成为了提升用户体验的关键因素。其中,批量上传图片功能是许多应用中不可或缺的一部分,尤其是在社交媒体、电子...

    php+jquery编写的图片上传并实现在线裁剪功能

    总的来说,这个项目结合了前端的用户交互、图片预览和裁剪,以及后端的文件上传处理和图片编辑,展示了PHP、jQuery和Ajax技术在实现动态Web应用中的协同工作。通过这样的功能,开发者可以为用户提供更加直观和便捷的...

    使用jQuery实现图片轮播.html

    使用jQuery实现图片轮播html5手机web页面

Global site tag (gtag.js) - Google Analytics