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 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
用CSS3画一个爱心
Apr 27 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php使用百度天气接口示例
2014/04/22 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python多图片合并PDF的方法
2019/01/03 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
django的model操作汇整详解
2019/07/26 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python continue语句实例用法
2020/02/06 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
教师岗位职责范本
2013/12/29 职场文书
男方婚礼答谢词
2015/01/20 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android