利用HTML5和css3 选中图片上传到服务器，插件地址如下
https://yusi123.com/3349.html
分三步，需要将js文件和css文件拷贝到项目目录下，在需要选择的图片的文件中引入，然后将HTML代码复制
<!--选择图片模块start-->
<h2>2017年6月27日14:04:20</h2>
<ul>
<li><img src="../images/11287113923_57d37ed9d3_q.jpg" /></li>
<!--<li><img src="../images/8095683964_9e27753908_q.jpg" /></li>-->
<li><img src="../images/8018956825_67bf62c098_q.jpg" /></li>
<li><img src="../images/7587724752_cdb9f0c444_q.jpg" /></li>
<li><img src="../images/7587738254_707a32f27b_q.jpg" /></li>
<!--<li><img src="../images/8095680852_893f685cbd_q.jpg" /></li>
<li><img src="../images/8018953043_c6ef9e3b29_q.jpg" /></li>
<li><img src="../images/7445019824_914dea4ac3_q.jpg" /></li>-->
</ul>
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body {
background: #f2f2f2;
font-family: Lato;
-webkit-font-smoothing: antialiased;
}
/*ul, div {
position: relative;
margin: 50px auto;
width: 710px;
padding: 0;
list-style: none;
text-align: center;
text-transform: uppercase;
font-weight: 900;
font-size: 20px;
line-height: 40px;
color: #555;
}*/
h1 {
position: absolute;
margin: 0;
padding: 0;
width: 710px;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 1em;
z-index: -1;
}
img {
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 100%;
border-radius: 1px;
box-shadow: 0 0 0 4px #fff;
cursor: pointer;
animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-o-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-ms-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-moz-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-webkit-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
@keyframes unselected {
0% { box-shadow: 0 0 0 4px #00c09e; }
50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
}
@-o-keyframes unselected {
0% { box-shadow: 0 0 0 4px #00c09e; }
50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
}
@-ms-keyframes unselected {
0% { box-shadow: 0 0 0 4px #00c09e; }
50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
}
@-moz-transition unselected {
0% { box-shadow: 0 0 0 4px #00c09e; }
50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
}
@-webkit-keyframes unselected {
0% { box-shadow: 0 0 0 4px #00c09e; }
50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
}
li {
position: relative;
margin: 6px !important;
width: 157px;
height: 157px;
float: left;
}
li:before {
content: "\2714";
display: block;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
width: 40px;
height: 40px;
line-height: 40px;
background: #00c09e;
border-radius: 50px;
color: #fff;
text-align: center;
font-size: 16px;
z-index: 10;
opacity: 0;
transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
li.selected:before {
opacity: 1;
}
/* img selection */
li.selected img {
box-shadow: 0 0 0 4px #00c09e;
animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-o-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-ms-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-moz-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
-webkit-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
@keyframes selected {
0% { border-color: #fff; }
50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
}
@-o-keyframes selected {
0% { box-shadow: 0 0 0 4px #fff; }
50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
}
@-ms-keyframes selected {
0% { box-shadow: 0 0 0 4px #fff; }
50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
}
@-moz-transition selected {
0% { box-shadow: 0 0 0 4px #fff; }
50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
}
@-webkit-keyframes selected {
0% { box-shadow: 0 0 0 4px #fff; }
50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
}
/* button */
button {
height: 45px;
margin: 0 7px;
padding: 5px 0;
font-weight: 700;
font-size: 15px;
letter-spacing: 2px;
color: #fff;
border: 0;
border-radius: 2px;
text-transform: uppercase;
outline: 0;
}
button.select {
float: left;
background: #435a6b;
cursor: pointer;
width: 150px;
}
button.select:before, button.select:after {
position: absolute;
display: block;
content: 'select all';
width: 150px;
text-align: center;
transition: 0.1s linear;
-o-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-webkit-transition: 0.1s linear;
}
button.select:after {
content: 'unselect';
margin-top: 20px;
opacity: 0;
}
button.select.selected:before {
transform: translate(0,-38px);
-o-transform: translate(0,-38px);
-ms-transform: translate(0,-38px);
-moz-transform: translate(0,-38px);
-webkit-transform: translate(0,-38px);
opacity: 0;
}
button.select.selected:after {
transform: translate(0,-38px);
-o-transform: translate(0,-38px);
-ms-transform: translate(0,-38px);
-moz-transform: translate(0,-38px);
-webkit-transform: translate(0,-38px);
opacity: 1;
}
button.send {
float: right;
background: #aaa;
padding: 0px 15px;
transition: 0.3s linear;
-o-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
}
.mui-content {
overflow: hidden;
}
.mui-content ul{
overflow: hidden;
}
.mui-content h2{
height: 60px;
line-height: 60px;
width: 100%;
font-size: 14px;
text-align: left;
margin-left: 10px;
display: block;
}
button.send.selected {
background: #00c09e;
cursor: pointer;
}
button.send:after {
position: absolute;
content: attr(data-counter);
padding: 5px 8px;
margin: -29px 0 0 0px;
line-height: 100%;
border: 1px #fff solid;
border-radius: 60px;
background: #00c09e;
transition: 0.1s linear;
-o-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-webkit-transition: 0.1s linear;
opacity: 0;
}
button.send.selected:after {
opacity: 1;
}
//这是选择图片的js文件 // item selection
$('li').click(function () {
$(this).toggleClass('selected');
if ($('li.selected').length == 0)
$('.select').removeClass('selected');
else
$('.select').addClass('selected');
counter();
}); // all item selection
$('.select').click(function () {
if ($('li.selected').length == 0) {
$('li').addClass('selected');
$('.select').addClass('selected');
}
else {
$('li').removeClass('selected');
$('.select').removeClass('selected');
}
counter();
console.log(counter());
}); // number of selected items
function counter() {
if ($('li.selected').length > 0)
$('.send').addClass('selected');
else
$('.send').removeClass('selected');
$('.send').attr('data-counter',$('li.selected').length);
}
利用HTML5和css3 选中图片上传到服务器，插件地址如下的更多相关文章
- 利用WCF与Android实现图片上传并传参
利用WCF与Android实现图片上传并传参 最近做一个项目后端使用WCF接收Android手机拍照并带其它参数保存到服务器里:刚好把最近学习的WCF利用上,本以为是个比较简单的功能应该很好实现,没想 ...
- JS图片上传预览插件制作（兼容到IE6）
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
- 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- php form 图片上传至服务器上
本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...
- Html5学习笔记：图片上传
图片上传是业务需求中常见的功能,最基础的是单图片的上传.比较复杂的多图片上传,都是基于单图片上传. Form表单上传 h5的原生表单上传图片,代码如下: <!DOCTYPE html> & ...
- ckeditor如何能实现直接粘贴把图片上传到服务器中?
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- 根目录97 <input file>标签，把图片上传到服务器（跟增删改查一起实现）
首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...
- ssm框架实现图片上传显示并保存地址到数据库
本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结 ...
随机推荐
- centos7下rsync+inotify脚本实现文件同步，.NET CORE客户端文件更新后自动重启服务
源服务器IP:192.168.8.51 目标服务器IP:192.168.8.79 安装前源服务器及目标服务器均需关闭FIREWALLD\SELINUX防火墙 sestatus | grep statu ...
- LGP5161口胡
大家好,我是后缀自动机套线段树魔怔人,我非常喜欢使用后缀自动机套线段树草字符串题. 看到一个区间加上一个相同的数后等于另外一个区间,很容易想到先对序列做差分,统计长度为1的答案后再来统计这些. 直接统 ...
- 分布式 PostgreSQL 集群(Citus)官方示例 - 时间序列数据
在时间序列工作负载中,应用程序(例如一些实时应用程序查询最近的信息,同时归档旧信息. https://docs.citusdata.com/en/v10.2/sharding/data_modelin ...
- 依图语音API的C#封装以及调用进行语音转写的处理
对于语音识别,一般有实时语音识别和语音文件的识别处理等方式,如在会议.培训等场景中,可以对录制的文件进行文字的转录,对于转录文字的成功率来说,如果能够转换90%以上的正确语音内容,肯定能减轻很多相关语 ...
- Ansible的原理与配置
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 Ansible原理 Ansible 是一款开源自动化平台.它是一种简单的自动化语言,能够在Ansible Playbook 中完美地描述 IT 应 ...
- 模块 序列化模块：json pickle
模块:一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀 模块的形象: 内置模块:安装Python解释器的时候一起安装上的 第三方模块(扩展模块):需要自己安装 自 ...
- Spark—GraphX编程指南
Spark系列面试题 Spark面试题(一) Spark面试题(二) Spark面试题(三) Spark面试题(四) Spark面试题(五)--数据倾斜调优 Spark面试题(六)--Spark资源调 ...
- SpringMvc中函数的返回值是什么？
返回值可以有很多类型,有String, ModelAndView.ModelAndView类把视图和数据都合并的一起的,但一般用String比较好.
- BeanFactory和ApplicationContext有什么区别？
BeanFactory和ApplicationContext是Spring的两大核心接口,都可以当做Spring的容器.其中ApplicationContext是BeanFactory的子接口. (1 ...
- Thread 类中的 yield 方法有什么作用？
使当前线程从执行状态(运行状态)变为可执行态(就绪状态). 当前线程到了就绪状态,那么接下来哪个线程会从就绪状态变成执行状态呢?可 能是当前线程,也可能是其他线程,看系统的分配了.