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

时间：2022-06-25 18:10:13 编辑：袖梨来源：一聚教程网

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

1、form提交

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;

}

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

最后效果图：

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程