今天跟大家一起学习的是,使用HTML5中新提供的文件API,实现从客户端用户的文件夹中,拖拉文件到你的浏览器中,然后实现文件的上传.目前HTML5中只有FIREFOX和Chrome支持这种拖拉上传功能.下面具体代码学习之:
1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.
2) index.html 代码:
其中,引入了jquery库和jquery.filedrop.js这个库,而dropbox这个DIV
是用来做拖放文件用的区域.
接下来,再放置一个区域,是显示拖放图片后,对图片进行预览,并显示上传进度条的div,如下:
由于jquey filedrop这个插件已经帮我们做了不少东西了,所以我们只需要利用这个插件就可以了,其中asset/js/script.js代码如下:
稍微解析下,这里var reader = new FileReader();
是调用了HTML5的API,然后当用户从客户端的文件夹中拖拉了一张图片到拖放区域后,
图片实际上以dataurl形式保存(实际上是BASE64编码),
reader.readAsDataURL(file);
这里执行后,就会触发reader.onload 事件,这里就将img的src属性设置为图片的实际内容了,即显示一张100*100的图片预览图了.
接下来,当每张图片在dropbox区域中被显示后,这个时候可以触发file drop这个插件的上传功能了,接下来看这个插件的功能代码:
重点关注的方法为uploadStarted和progressUpdated.
而PHP部分接收文件的话,可以这样:
CSS代码为:
整个运行的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) 首先本文会用到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