HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)


Posted in HTML / CSS onJanuary 05, 2017

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

1、form提交

2、flash

3、HTML5

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

效果图1:

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)

效果图2:

HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)

由于本地上传实在太快,录了个80M的gif,终于可以看到上传的细节效果了,是不是还是很不错的。

由于代码比较多:

这一片主要讲一下HTML和CSS:

HTML代码:

<!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:

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实现无插件拖拽上传图片(支持预览与批量)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
html5的localstorage详解
May 09 #HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 #HTML / CSS
You might like
PHP 开发工具
2006/12/06 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
json数据的列循环示例
2013/09/06 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
js实现烟花特效
2020/03/02 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python查看微信好友是否删除自己
2016/12/19 Python
python爬取微信公众号文章的方法
2019/02/26 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
租赁意向书范本
2014/04/01 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
生日答谢词
2015/01/05 职场文书
限期整改通知书
2015/04/22 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书