本篇文章主要介绍了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 | <!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 >
< div 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 >
< div class = "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:
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一起学习进步吧。群内每天都有免费教程视频直播分享。
|