如何用HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）

本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。

上传基本是项目中经常出现的，一般采用：

1、form提交

2、flash

3、HTML5

form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jQuery的uploadify作为项目中的上传工具，uploadify也有基于Html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。

效果图1：

效果图2：

由于本地上传实在太快，录了个80M的gif，终于可以看到上传的细节效果了，是不是还是很不错的。

由于代码比较多：

这一片主要讲一下HTML和CSS：

HTML代码：

 
     <!DOCTYPE html>   
    

 
          
     < 
     title 
     ></ 
     title 
     >   
    

 
          
     < 
     meta 
      charset 
     = 
     "utf-8" 
     />   
    

 
          
     < 
     link 
      href 
     = 
     "reset.css" 
      type 
     = 
     "text/css" 
      rel 
     = 
     "stylesheet" 
     />   
    

 
          
     < 
     link 
      href 
     = 
     "01.css" 
      type 
     = 
     "text/css" 
      rel 
     = 
     "stylesheet" 
     />   
    

 
     < 
     div 
      id 
     = 
     "uploadBox" 
     >   
    

 
                  
     < 
     img 
      src 
     = 
     "images/pic1.jpg" 
     />   
    

 
                  
     < 
     span 
      class 
     = 
     "progress" 
     ></ 
     span 
     >   
    

 
                  
     < 
     span 
      class 
     = 
     "percentage" 
     ></ 
     span 
     >   
    

 
                  
     < 
     img 
      src 
     = 
     "images/pic2.jpg" 
     />   
    

 
                  
     < 
     span 
      class 
     = 
     "progress" 
     ></ 
     span 
     >   
    

 
                  
     < 
     span 
      class 
     = 
     "percentage" 
     >12%</ 
     span 
     >   
    

 
                  
     < 
     img 
      src 
     = 
     "images/pic2.jpg" 
     />   
    

 
                  
     < 
     span 
      class 
     = 
     "progress" 
     ></ 
     span 
     >   
    

 
                  
     < 
     span 
      class 
     = 
     "percentage" 
     ></ 
     span 
     >   
    

 
              
     < 
     div 
      class 
     = 
     "clearfix" 
     ></ 
     div 
     >   
    

还是很简洁的：

a、一个div#uploadBox，里面ul li 代表每个上传图片单元

b、li img 图片

c、li span.progress用于显示进度，有种水上涨的效果，从height:0% -100%;

d、li span.percentage 用于在图片中央显示 1% 到100%数字，当到达100%时，显示一个正确的图片

CSS：

 
     body   
    

{

 
     background 
     :  
     #eee 
     ;

}

 
     #uploadBox   
    

{

 
     width 
     :  
     622px 
     ;

 
     height 
     :  
     362px 
     ;

 
     background-color 
     :  
     #fff 
     ;

}

 
     #uploadBox ul li   
    

{

 
     float 
     :  
     left 
     ;

 
     position 
     :  
     relative 
     ;

 
     margin-left 
     :  
     5px 
     ;

 
     margin-top 
     :  
     5px 
     ;

}

 
     #uploadBox  li img   
    

{

 
          
     border 
     :  
     1px 
      solid 
      #D1D1D1 
     ;   
    

 
     width 
     :  
     198px 
     ;

 
     height 
     :  
     112px 
     ;

 
     vertical-align 
     :  
     middle 
     ;

}

 
     #uploadBox  li  .percentage   
    

{

 
     width 
     :  
     69px 
     ;

 
     height 
     :  
     69px 
     ;

 
     position 
     :  
     absolute 
     ;

 
     margin-left 
     :  
     -34.5px 
     ;

 
     margin-top 
     :  
     -34.5px 
     ;

 
     text-align 
     :  
     center 
     ;

 
     font-size 
     :  
     18px 
     ;

 
     line-height 
     :  
     69px 
     ;

 
     color 
     :  
     #fff 
     ;

 
     border-radius:  
     34.5px 
     ;

}

 
     #uploadBox  li.done .percentage   
    

{

 
          
     background 
     :  
     url 
     ( 
     "images/done.png" 
     )  
     no-repeat 
      0 
      0 
     ;   
    

 
     text-indent 
     :  
     -1000em 
     ;

}

 
     #uploadBox li .progress   
    

{

 
     position 
     :  
     absolute 
     ;

 
     height 
     :  
     22.4px 
     ;

 
     bottom 
     :  
     0px 
     ;

 
     width 
     :  
     200px 
     ;

 
     background 
     :  
     #000 
     ;

 
     opacity: . 
     5 
     ;

}

 
     .clearfix   
    

{

 
     clear 
     :  
     both 
     ;

}

都是比较简单的，基本就是定位的简单使用~大家自己看下~

最后效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，想学习更多的前端HTML+CSS3的课程。加入我们学习qq群：四八71七1八3九，网页制作HTML学习群 487-171+839一起学习进步吧。群内每天都有免费教程视频直播分享。