HTML5与CSS3技术优势
HTML5和CSS3这俩好东西给前端开发加分不少！网页设计变得更有意思，更有创意了。HTML5多了很多有用的标签，还有一些新出炉的API，像Canvas、Video、Audio这些，让网页看起来更炫酷了。CSS3在样式设计上也有不小的突破，支持各种圆角啊、阴影啊、渐变之类的效果，让页面看起来更养眼。
传统上传方式与HTML5上传方式比较
上传图片的老方法有Form和Flash两种，不过，前者得让你整个网页翻新，体验不咋地；至于Flash本身不错，就是要用个小插件才行。这次我们直接用HTML5的File API、FileReader还有XMLHttpRequest这些新的API，就能实现不用装插件就能拖着图片上传！这样一来，大家的使用感受那可是棒极了。
基于HTML5的拖拽上传原理
其实很简单，HTML5的拖曳式上传就是靠 Drag and Drop API 和 File API来实现的。利用这些东西，你就可以轻松地把自己电脑上的文件拖放到网页上的特定位置进行分享！还有，通过 File API，我们还能从文件中拿到各种信息呢；再配合 XMLHttpRequest 这个牛人，就能实现文件的异步上传了，没有什么插件束缚，体验更棒。
HTML结构设计
搞定这无插件拖拽传图的功能，得先把 HTML 弄好。通常就是画个大div框包住我们要上传的地方，里面放个 ul 来列出每张图。然后每个 li 里头，又要有个 img 装图片，有个 span 放进度条，还有个 span 摆上百分比数字。这种结构简单明了，对后面的 style 排版和 JavaScript 操作都方便多了。
CSS样式设置
-
-
12%
-
咱们得做个样式表，让这些HTML元素看起来更美一点。给段落、列表、图片都加些尺寸、位置之类的style属性，让页面看起来美美的。再用CSS3里的动画效果和过渡特效，让进度条和百分比数字动起来，提高体验。
效果图展示
经过HTML结构设计和CSS样式调整之后，我们成功创建出一个既简洁又好看，而且功能超强的无插件拖拽上传图片神器。你只需要把电脑上的图一拉就可以放到上传区，然后就能看到上传进度和百分比！这种直观方便的使用方法简直提升用户感受无数倍，也绝对是现在网络应用开发的热潮~
总结与展望
这个基于HTML5/CSS3的拖动上传图片方法，就是让你体验更好！毕竟，Web前端技术一直在进步，我们有信心以后还能有很多新的办法，用起来更加方便快捷哦～
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;
}
。
评论0