无插件HTML,HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)分享!
上传基本是项目中经常出现的,一般采用:
1、form提交
2、flash
form提交会刷新页面,很难做到异步上传;flash可能是用得比较多了,因为可以兼顾到几乎所有的浏览器,我之前一直会用jQuery的uploadify作为项目中的上传工具,uploadify也有基于Html5好像是收费的,大家可以去官网看看;当然了,现在html5提供了API以及File,FileReader,XMLHttpRequest等强大的API,为我们拖放实现上传提供了可能。
效果图1:
效果图2:
由于本地上传实在太快,录了个80M的gif,终于可以看到上传的细节效果了,是不是还是很不错的。
由于代码比较多:
这一片主要讲一下HTML和CSS:
HTML代码:
- 12%
还是很简洁的:
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; }
都是比较简单的,基本就是定位的简单使用~大家自己看下~
最后效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。
如若转载,请注明出处:https://www.ssfiction.com/html5/471983.html
无插件HTML,HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)分享!相关推荐
- html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
- 超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列 谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必须引用jquery ...
- html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...
- html5学习(鼠标跟随和拖拽)
温故知新,以下是我以前写的html5的案例,从电脑中翻出来了,算是知识复习和回顾吧! 有图有代码! <!DOCTYPE html> <html> <head> &l ...
- 移动端实现元素拖拽效果插件_基于自然流布局的可视化拖拽搭建平台设计方案...
LowCode 是高效.高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向--基于自然流布局的可视化搭建平台. ...
- php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
- ue编辑器拖拽上传图片_editor.md实现拖拽剪切复制粘贴上传图片,文件插件
editor.md作为一款Markdown编辑器,界面美观,功能强大 但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足,下面就简单实现一个,废话不多说,直接上代码. uploadImg. ...
- html5 双指缩放图片,js实现移动端图片预览:手势缩放, 手势拖动,双击放大......
查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
最新文章
- hihoCoder1678 版本号排序
- 碎片化学习前端资料分享~
- 求二叉树节点个数、叶子节点、节点层次与宽度
- WPF、Authorware和Flash
- jquery获取前一个月日期
- 在Spark上运行WordCount程序
- Win7纯净版系统Windows未能启动,文件Winload.exe的解决方法
- [工具] Mac下一键APK逆向环境
- JQ插件OrgChart实现组织结构图
- python中的“ --snip-- ”是什么
- 为什么用于开关电源的开关管一般用MOS管而不是三极管
- ps人物素描及黑白上色
- 190㎡现代轻奢私宅,满屋洋溢着高级与优雅~
- nginx 如何将 https 请求转发到 http
- 冬天来了,春天还远吗
- android 伪终端,伪终端pty的原理及使用
- 当液晶显示屏发生漏液时该如何亡羊补牢?
- Android RIL代码详细分析
- html 下拉框 设置默认值,如何设置HTML select下拉框的默认值?
- 云计算和java开发哪个好找工作前景好,深入分析
热门文章
- 让 SAP Spartacus 某些 Component 不参与 SSR 的办法
- 如何为部署到 SAP BTP 平台上的 Node.js 应用提供Authorization 和 Trust 管理 - 权限管控
- SAP Spartacus里px,em和rem的应用
- SpringBoot启动时就会自动去连接mongdo DB指向的url
- SAP Analytics Cloud和SAP Cloud for Customer的集成
- SAP CRM附件上传的一种增强实现
- SAP Fiori 1.0 Migrate to Fiori 2.0
- CRM Fiori Opportunity Application Component.js - declare and require
- when is OData model initialized - finally found done by Framework
- How to resolve Unable to load groups error message