免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › HTML5和jquery实现图片拖拉上传
最近访问板块 发新帖
查看: 3627 | 回复: 0
打印 上一主题 下一主题

HTML5和jquery实现图片拖拉上传 [复制链接]

三里屯摇滚

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2011-09-30 13:47 |只看该作者 |倒序浏览
HTML5和jquery实现图片拖拉上传




今天跟大家一起学习的是,使用HTML5中新提供的文件API,实现从客户端用户的文件夹中,拖拉文件到你的浏览器中,然后实现文件的上传.目前HTML5中只有FIREFOX和Chrome支持这种拖拉上传功能.下面具体代码学习之:

1) 首先本文会用到https://github.com/weixiyen/jquery-filedrop这里的一个
jquery drop的插件,它很方便的帮我们封装了不少东西,先下载之.

2) index.html 代码:
  Java代码
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title>

  7.         <!-- Our CSS stylesheet file -->
  8.         <link rel="stylesheet" href="assets/css/styles.css" />

  10.         <!--[if lt IE 9]>
  11.           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12.         <![endif]-->
  13.     </head>

  15.     <body>

  17.                 <header>
  18.                         <h1>HTML5 File Upload with jQuery and PHP</h1>
  19.                 </header>

  21.                 <div id="dropbox">
  22.                         <span class="message">Drop images here to upload.
  23. <i>(they will only be visible to you)</i></span>
  24.                 </div>

  26.         <!-- Including The jQuery Library -->
  27.                 <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

  29.                 <!-- Including the HTML5 Uploader plugin -->
  30.                 <script src="assets/js/jquery.filedrop.js"></script>

  32.                 <!-- The main script file -->
  33.         <script src="assets/js/script.js"></script>

  35.     </body>
  36. </html>
复制代码
其中,引入了jquery库和jquery.filedrop.js这个库,而dropbox这个DIV
是用来做拖放文件用的区域.
  接下来,再放置一个区域,是显示拖放图片后,对图片进行预览,并显示上传进度条的div,如下:
  Java代码


  3. <div class="preview done">

  5.         <span class="imageHolder">
  6.                 <img src="" />
  7.                 <span class="uploaded"></span>
  8.         </span>

  10.         <div class="progressHolder">
  11.                 <div class="progress"></div>
  12.         </div>

  14. </div>
复制代码
由于jquey filedrop这个插件已经帮我们做了不少东西了,所以我们只需要利用这个插件就可以了,其中asset/js/script.js代码如下:
  Java代码

  2. var template = '<div class="preview">'+
  3.                                                 '<span class="imageHolder">'+
  4.                                                         '<img />'+
  5.                                                         '<span class="uploaded"></span>'+
  6.                                                 '</span>'+
  7.                                                 '<div class="progressHolder">'+
  8.                                                         '<div class="progress"></div>'+
  9.                                                 '</div>'+
  10.                                         '</div>';

  12.         function createImage(file){

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

  17.                 var reader = new FileReader();

  19.                 image.width = 100;
  20.                 image.height = 100;

  22.                 reader.onload = function(e){

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

  28.                
  29.                 reader.readAsDataURL(file);

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

  34.                
  35.                 $.data(file,preview);
  36.         }


复制代码
稍微解析下,这里var reader = new FileReader();  

  是调用了HTML5的API,然后当用户从客户端的文件夹中拖拉了一张图片到拖放区域后,
图片实际上以dataurl形式保存(实际上是BASE64编码),
    reader.readAsDataURL(file);  
   这里执行后,就会触发reader.onload 事件,这里就将img的src属性设置为图片的实际内容了,即显示一张100*100的图片预览图了.
  接下来,当每张图片在dropbox区域中被显示后,这个时候可以触发file drop这个插件的上传功能了,接下来看这个插件的功能代码:
  Java代码

  2.   $(function(){

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

  7.         dropbox.filedrop({
  8.                 //用来标识上传文件的数组名
  9.                 paramname:'pic',
  10.                
  11.                   //上传文件个数
  12.                 maxfiles: 5,
  13.             maxfilesize: 2, // 每个文件最大大小,为2MB
  14.                 url: 'post_file.php',

  16.                 uploadFinished:function(i,file,response){
  17.                         $.data(file).addClass('done');
  18.                                         },

  20.             error: function(err, file) {
  21.                         switch(err) {
  22.                                 case 'BrowserNotSupported':
  23.                                         showMessage('Your browser does not support HTML5 file uploads!');
  24.                                         break;
  25.                                 case 'TooManyFiles':
  26.                                         alert('Too many files! Please select 5 at most!');
  27.                                         break;
  28.                                 case 'FileTooLarge':
  29.                                         alert(file.name+' is too large! Please upload files up to 2mb.');
  30.                                         break;
  31.                                 default:
  32.                                         break;
  33.                         }
  34.                 },

  36.                 //判断每个上传的图片是否文件格式
  37.                 beforeEach: function(file){
  38.                         if(!file.type.match(/^image\//)){
  39.                                 alert('Only images are allowed!');

  41.                                                                 return false;
  42.                         }
  43.                 },

  45.                 uploadStarted:function(i, file, len){
  46.                         createImage(file);
  47.                 },

  49.                 progressUpdated: function(i, file, progress) {
  50.                         $.data(file).find('.progress').width(progress);
  51.                 }

  53.         });

  55.         var template = '...';

  57.         function createImage(file){
  58.                 // ... see above ...
  59.         }

  61.         function showMessage(msg){
  62.                 message.html(msg);
  63.         }

  65. });
复制代码
重点关注的方法为uploadStarted和progressUpdated.

而PHP部分接收文件的话,可以这样:
  Java代码
  1. if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){     
  2.   
  3.         $pic = $_FILES['pic'];     
  4.   
  5. }   
  6. //然后自己调用PHP代码去管理上传  
复制代码
CSS代码为:
Java代码

  2. /*-------------------------  
  3.     Dropbox Element  
  4. --------------------------*/  
  5.   
  6. #dropbox{   
  7.     background:url('../img/background_tile_3.jpg');   
  8.   
  9.     border-radius:3px;   
  10.     position: relative;   
  11.     margin:80px auto 90px;   
  12.     min-height: 290px;   
  13.     overflow: hidden;   
  14.     padding-bottom: 40px;   
  15.     width: 990px;   
  16.   
  17.     box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);   
  18. }   
  19.   
  20. #dropbox .message{   
  21.     font-size: 11px;   
  22.     text-align: center;   
  23.     padding-top:160px;   
  24.     display: block;   
  25. }   
  26.   
  27. #dropbox .message i{   
  28.     color:#ccc;   
  29.     font-size:10px;   
  30. }   
  31.   
  32. #dropbox:before{   
  33.     border-radius:3px 3px 0 0;   
  34. }   
  35.   
  36. /*-------------------------  
  37.     Image Previews  
  38. --------------------------*/  
  39.   
  40. #dropbox .preview{   
  41.     width:245px;   
  42.     height: 215px;   
  43.     float:left;   
  44.     margin: 55px 0 0 60px;   
  45.     position: relative;   
  46.     text-align: center;   
  47. }   
  48.   
  49. #dropbox .preview img{   
  50.     max-width: 240px;   
  51.     max-height:180px;   
  52.     border:3px solid #fff;   
  53.     display: block;   
  54.   
  55.     box-shadow:0 0 2px #000;   
  56. }   
  57.   
  58. #dropbox .imageHolder{   
  59.     display: inline-block;   
  60.     position:relative;   
  61. }   
  62.   
  63. #dropbox .uploaded{   
  64.     position: absolute;   
  65.     top:0;   
  66.     left:0;   
  67.     height:100%;   
  68.     width:100%;   
  69.     background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);   
  70.     display: none;   
  71. }   
  72.   
  73. #dropbox .preview.done .uploaded{   
  74.     display: block;   
  75. }   
  76.   
  77. /*-------------------------  
  78.     Progress Bars  
  79. --------------------------*/  
  80.   
  81. #dropbox .progressHolder{   
  82.     position: absolute;   
  83.     background-color:#252f38;   
  84.     height:12px;   
  85.     width:100%;   
  86.     left:0;   
  87.     bottom: 0;   
  88.   
  89.     box-shadow:0 0 2px #000;   
  90. }   
  91.   
  92. #dropbox .progress{   
  93.     background-color:#2586d0;   
  94.     position: absolute;   
  95.     height:100%;   
  96.     left:0;   
  97.     width:0;   
  98.   
  99.     box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;   
  100.   
  101.     -moz-transition:0.25s;   
  102.     -webkit-transition:0.25s;   
  103.     -o-transition:0.25s;   
  104.     transition:0.25s;   
  105. }   
  106.   
  107. #dropbox .preview.done .progress{   
  108.     width:100% !important;   
  109. }  


复制代码
整个运行的DEMO为:
http://demo.tutorialzine.com/201 ... -upload-jquery-php/

代码下载地址为:
  http://demo.tutorialzine.com/201 ... ml5-file-upload.zip
web, web
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP