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;
    }

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

    最后效果图：

    相关文章

    精彩推荐