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

作者：袖梨 2022-06-25

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

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代码：

 
 
 
     
     
     
     
   
 
 
   
   
 
    
     
        
  •  
    •              
                 
                 
             
       
       
            
  •  
    •              
                 
                12% 
             
       
       
             
                 
                 
                 
             
       
            
     
         
       
     
       
     
     

    还是很简洁的：

    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; 
        border:1pxsolid#777; 
        margin:120pxauto; 
    } 
       
    #uploadBox ul li 
    { 
        float:left; 
        position:relative; 
        margin-left:5px; 
        margin-top:5px; 
    } 
       
    #uploadBox  li img 
    { 
        border:1pxsolid#D1D1D1; 
        width:198px; 
        height:112px; 
        vertical-align:middle; 
    } 
       
    #uploadBox  li  .percentage 
    { 
        width:69px; 
        height:69px; 
        position:absolute; 
        left:50%; 
        top:50%; 
        margin-left:-34.5px; 
        margin-top:-34.5px; 
        text-align:center; 
        font-size:18px; 
        line-height:69px; 
        color:#fff; 
        border-radius:34.5px; 
        background: rgba(0,0,0, .8); 
    } 
       
    #uploadBox  li.done .percentage 
    { 
        background:url("images/done.png")no-repeat00; 
        text-indent:-1000em; 
    } 
       
    #uploadBox li .progress 
    { 
        position:absolute; 
        height:22.4px; 
        bottom:0px; 
        width:200px; 
        background:#000; 
        opacity: .5; 
    } 
       
    .clearfix 
    { 
        clear:both; 
    } 

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

    最后效果图：

    相关文章

    精彩推荐