利用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搭建的项目,首先看下项目结 ...
随机推荐
- 【AI】AI学习方向
df
- 【SQL登录问题】
essay from:http://www.jb51.net/article/59352.htm 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器 今早 ...
- props配置
配置项props 功能:让组件接收外部传过来的数据[相当于微信转账:有一个转账人转钱给接收者,接收者需要确认接收] (1)传递数据: <Demo name="xxx"> ...
- 论如何在使用RedisStandaloneConfiguration时让JedisConnectionFactory用上JedisPoolConfig
前言 公司项目上线后经常运行一两天后就会出现延时.无响应的情况,当时第一反应觉得可能是某些业务优化不行,检查业务也没发现有什么问题,前前后后倒是修了两三个BUG,本以为没啥事儿了,但也就好了两天,很奇 ...
- 设计模式在 Spring 中的应用
Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内典范.好了,话不多说,开始今天的内容. spring中常用的设计模式达到九种,我们一一举例: 第一种:简单工厂 又叫 ...
- ArcGIS Server 禁用/rest/services路径（禁用服务目录）
ArcGIS Server服务目录(路径如:http://<hostname>:6080/arcgis/rest/services)默认可以不需要登陆直接打开.效果如下图. ArcGIS服 ...
- 使用Xtrabackup 备份mysql数据库
##创建逻辑卷 [root@node1 ~]# pvcreate /dev/sdb1 Physical volume "/dev/sdb1" successfully create ...
- location 匹配规则
location 匹配规则 语法规则 location [=||*|^~] /uri/ { - } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 locatio ...
- Windows服务器上搭建Windows2003+IIS+ASP.NET+MSSQL网站
一.安装IIS服务 1. 选择"开始"→"所有程序"→"管理工具"→"管理您的服务器"菜单命令,启动"添加或删 ...
- Apache+PHP+Mysql安装手册（Linux）
一. 检查系统环境 1.确认centos版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Co ...