html5+无插件,如何用HTML5+CSS3实现无插件拖拽上传图片

原标题：如何用HTML5+CSS3实现无插件拖拽上传图片

本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)，现在html5提供了API以及File，FileReader，等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。

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

1、form提交

2、flash

3、HTML5

form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jQuery的uploadify作为项目中的上传工具，uploadify也有基于Html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileReader，等强大的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

• 12%