如何用HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）
本篇文章主要介绍了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：
效果图2：
由于本地上传实在太快，录了个80M的gif，终于可以看到上传的细节效果了，是不是还是很不错的。
由于代码比较多：
这一片主要讲一下HTML和CSS：
HTML代码：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<
html
>
<
head
>
<
title
>
<
meta
charset
=
"utf-8"
/>
<
link
href
=
"reset.css"
type
=
"text/css"
rel
=
"stylesheet"
/>
<
link
href
=
"01.css"
type
=
"text/css"
rel
=
"stylesheet"
/>
<
body
>
<
div
id
=
"uploadBox"
>
<
ul
>
<
li
>
<
img
src
=
"images/pic1.jpg"
/>
<
span
class
=
"progress"
>
<
span
class
=
"percentage"
>
<
li
>
<
img
src
=
"images/pic2.jpg"
/>
<
span
class
=
"progress"
>
<
span
class
=
"percentage"
>12%
<
li
class
=
"done"
>
<
img
src
=
"images/pic2.jpg"
/>
<
span
class
=
"progress"
>
<
span
class
=
"percentage"
>
<
div
class
=
"clearfix"
>
|
还是很简洁的：
a、一个div#uploadBox，里面ul li 代表每个上传图片单元
b、li img 图片
c、li span.progress用于显示进度，有种水上涨的效果，从height:0% -100%;
d、li span.percentage 用于在图片中央显示 1% 到100%数字，当到达100%时，显示一个正确的图片
CSS：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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
;
}
|
都是比较简单的，基本就是定位的简单使用~大家自己看下~
最后效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，想学习更多的前端HTML+CSS3的课程。加入我们学习qq群：四八71七1八3九，网页制作HTML学习群 487-171+839一起学习进步吧。群内每天都有免费教程视频直播分享。