HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）
发布时间：01/15 来源： 浏览：
关键词：
这篇文章介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），非常实用，有需要的同学可以参考一下本文
上传基本是项目中经常出现的，一般采用：
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>
<html>
<head>
<title></title>
<metacharset="utf-8"/>
<linkhref="reset.css"type="text/css"rel="stylesheet"/>
<linkhref="01.css"type="text/css"rel="stylesheet"/>
</head>
<body>
<divid="uploadBox">
<ul>
<li>
<imgsrc="images/pic1.jpg"/>
<spanclass="progress"></span>
<spanclass="percentage"></span>
</li>
<li>
<imgsrc="images/pic2.jpg"/>
<spanclass="progress"></span>
<spanclass="percentage">12%</span>
</li>
<liclass="done">
<imgsrc="images/pic2.jpg"/>
<spanclass="progress"></span>
<spanclass="percentage"></span>
</li>
<divclass="clearfix"></div>
</ul>
</div>
</body>
</html>
|
还是很简洁的：
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;
}
|
都是比较简单的，基本就是定位的简单使用~大家自己看下~
最后效果图：
