`

HTML5和jquery实现图片拖拉上传

jquerychromefirefox 
阅读更多
今天跟大家一起学习的是,使用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
踩
分享到：
| Oracle导出数据到excel时身份证被截取的问 ...
评论
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_

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

    JAVA|jQuery-File-Upload多文件上传及拖拽上传

    在本文中，我们将深入探讨如何使用Java和jQuery实现多文件上传功能，以及如何添加拖拽上传和进度条显示。这个话题对于任何需要处理用户上传大量数据的Web应用程序来说至关重要。 首先，`jQuery-File-Upload-9.10.1....

    jq+layui 实现图片拖拽上传功能

    总结起来，使用jQuery和Layui实现图片拖拽上传涉及的关键知识点有： 1. jQuery的选择器和事件绑定。 2. HTML5的拖放API，包括`dragenter`, `dragleave`, `dragover`, 和 `drop`事件。 3. File API，如`FileReader`的...

    jQuery-file-upload的各种语言拖拽上传文件功能

    《jQuery-file-upload：实现跨语言的拖拽上传文件功能》 在现代Web开发中，用户交互体验至关重要，其中文件上传是常见的功能之一。jQuery-file-upload是一个强大的jQuery插件，它支持多语言、拖拽上传等多种特性，...

    jQuery-File-Upload-9.19.1.zip_jqueryfileupload jsp

    总的来说，jQuery File Upload 9.19.1是一个强大且灵活的文件上传组件，它提供了丰富的API和配置选项，使得文件上传功能在各种Web应用中都能得到优雅的实现。与Java JSP的整合进一步增强了其在企业级应用中的适应性...

    java实现拖拽式文件上传

    3. **HTML5 Drag and Drop API**：前端部分需要利用HTML5的Drag and Drop API，允许用户从桌面拖动文件到网页指定区域进行上传。你需要编写JavaScript或jQuery代码来监听拖放事件，获取被拖放文件的信息，并将这些...

    图片上传控件Dropare.zip

    Droparea 是一个基于 HTML5 实现的拖拉上传图片 jQuery 插件并包含一个 PHP 服务器端脚本来接收上传的文件。只要将图片拖进指定位置，图片将自动上传至服务 器。还可以查看上传过程进度。已经在 Google Chrome 和 ...

    ajax 拖拉图片(同时适用IE,FIREFOX)

    以上就是利用AJAX技术在网页上实现拖拉图片的基础方法，同时兼容IE和Firefox。在实际应用中，可能还需要考虑其他因素，比如防止图片超出容器边界、处理拖放时的视觉反馈等，以提供更完善的用户体验。同时，确保...

    自定义表单（拖拽式表单）

    在网页中使用formBuilder，首先需要引入jQuery库和formBuilder的CSS及JS文件。然后，可以通过调用$.formBuilder()方法初始化一个formBuilder实例，指定一个容器元素来显示表单设计界面。 4. **自定义表单样式** ...

Magicbox
Global site tag (gtag.js) - Google Analytics