Rumah > hujung hadapan web > Tutorial H5 > HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

黄舟
Lepaskan: 2017-03-15 16:33:27
asal
1737 orang telah melayarinya

本篇文章主要介绍了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:

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

效果图2:

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

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

由于代码比较多:

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

HTML代码:


<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8"/>  
    <link href="reset.css" type="text/css" rel="stylesheet"/>  
    <link href="01.css" type="text/css" rel="stylesheet"/>  
  
</head>  
<body>  
  
  
<p id="uploadBox">  
    <ul>  
        <li>  
            <img src="images/pic1.jpg"/>  
            <span class="progress"></span>  
            <span class="percentage"></span>  
        </li>  
  
  
        <li>  
            <img src="images/pic2.jpg"/>  
            <span class="progress"></span>  
            <span class="percentage">12%</span>  
        </li>  
  
  
        <li class="done">  
            <img src="images/pic2.jpg"/>  
            <span class="progress"></span>  
            <span class="percentage"></span>  
        </li>  
  
        <p class="clearfix"></p>  
    </ul>  
  
</p>  
  
</body>  
</html>
Salin selepas log masuk

还是很简洁的:

a、一个p#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: 1px solid #777;  
    margin: 120px auto;  
}  
  
#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;  
    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-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;  
}
Salin selepas log masuk

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

最后效果图:

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

Atas ialah kandungan terperinci HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan