想要搞定网上传图？其实没那么难！传统方法就是用 form 或 flash，但现在 HTML5+CSS3 变化多端，有了它们的帮忙，上传就可以不用插件，而且还能拖动、预览和批量处理~下面就告诉你怎么玩转这个技术。
1. HTML5 API介绍
HTML5给前端技术哥们儿们整出来不少好用的API，比如File啦、FileReader啦、XMLHttpRequest之类的神器，拖拽上传都能搞定。用上这玩意儿，处理文件、翻阅文件内容和跟服务器传文件就像吃饭喝水那么简单，让你的上传过程变得溜溜的。
2.传统上传方式对比
咱们说老办法如FORMsubmit，得让整个页面都刷新，那就不太适合我们用了。不然说说Flash？倒是兼容好点，不过得装个小配件才能用。换句话说，你想通过HTML5来传图的话，就能解决页面刷新这个问题了，而且现代的浏览器都能轻松驾驭，用起来也舒心！
3. HTML结构设计
要想实现无插件的拖拽上传图片功能，那HTML的结构得弄明白才行。可以拿一个p元素和ul li元素组一下，搞成上传图片的小盒子。在li里头放上显示图片的img标签，再加个span元素，就能看到进度条和百分比数。等到进度到100%，就会出现正确的图示，简单明了又好看！
4. CSS样式设计
要搞定上传图片那方面的布局和样式，我们完全可以借助CSS来完成。通过调整位置之类的属性，就能让图片、进度条和百分比数字这些小元素乖乖听话，按咱们的想法来排列展示，最后给大家呈现一个既漂亮又容易看懂的界面。
5.效果图展示
文章里有效果图1和效果图2，很清楚地展示了没有插件就可以直接拖动上传图片这个功能！你看那边那个进度条，从左往右慢慢地上升；还有那几个小数字，也在告诉你进度是多少；最后上传完了之后，右上角还有个小小的图标出现，表示成功！
-
-
12%
-
6.代码分析与优化
这儿的代码有点多不过别急，咱们把重点放在HTML跟CSS那儿。这样子调整一下代码，不仅能让网页加载快些，还能提升用户感受。另外，有个小技巧就是用工具把这些代码给压缩并合到一起，这样文件就能变小了，网页的表现也更棒！
7.兼容性处理与错误调试
你知道吗？做网站开发时，不同浏览器对HTML5和CSS3的支持不太相同！所以为了防止功能失效，我们需要在各种主流浏览器上都要搞好兼容性。另外，开发过程中肯定少不了排错环节！
8.用户体验优化
除了最基础的功能之外，我们可以在用户体验上做更多更好的优化比如加上些文件类型呀、大小限制呀这样的东西，还有就是拖拽互动提示啥的，都能让用起来更方便更舒适！
9.总结与展望
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;
}
这篇文章教你怎么用HTML5和CSS3做个不需要插件就能拖拽上传图片的功能。我们深入聊了聊这个事儿。以后互联网技术越来越发达，我觉得肯定还会有更牛的解决方案出来。希望大家看完能有点儿启发，以后在你们的项目里面也能用得上这些新技术！
评论0