HTML5和jquery实现图片拖拉下传-HTML教程-爱易网页

HTML5和jquery实现图片拖拉下传

日期：2014-05-17　浏览次数：20948 次

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;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5和jquery实现图片拖拉下传

相关资料更多>

推荐阅读更多>