利用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搭建的项目,首先看下项目结 ...
随机推荐
- java实现上传图片并压缩图片大小功能
缩略图压缩文件jar包 <!-- 图片缩略图 --> <dependency> <groupId>net.coobird</groupId> <a ...
- 专业3 Cookie 和Session的使用及原理
Cookie的使用及原理 什么是cookie cookie是一种用来跟踪和识别用户上网信息的会话控制技术,它将跟踪后的信息存储在客户端的浏览器上 cookie如何使用 第一步:设置cookie即可(告 ...
- 使用WebService的优点
1.支持跨平台,跨语言,远程调用 WSDL:web service definition language 直译 webservice定义语言 对应一种类型的文件.wsdl2.定义了web servi ...
- Arcmap软件报错：This application cannot run under a virtual machine arcmapr, 但是你并没有使用虚拟机
在任务栏搜索"启用或关闭 windows 功能",取消 "适用于 Linux 的 Windows 子系统" (有可能还需要 取消 "虚拟机平台&quo ...
- 内网穿透工具--NPS
一.简介 NPS是一款轻量级,高性能,强大功能的内网穿透代理服务器.目前支持TCP,UDP流量转发,可支持任何TCP,UDP上层协议(访问内网网站,本地支付接口调试,SSH访问,远程桌面,内网dns解 ...
- redis的事件处理机制
redis的事件处理机制 redis是单进程,单线程模型,与nginx的多进程不同,与golang的多协程也不同,"工作的工人"那么少,可那么为什么redis能这么快呢? epol ...
- 通过webgoat-xxe、jwt学习Java代码审计
WebGoat-JWT JWT Tokens 01 概念 本课程将介绍如何使用JSON Web Token(JWT)进行身份验证,以及在使用JWT时需要注意的常见陷阱. 目标 教授如何安全地实现令牌的 ...
- CF1500D Tiles for Bathroom （递推+大讨论）
题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...
- CF1479X Codeforces Round #700
C Continuous City(图的构造) 题目大意:让你构造一个n\le 32的有向无环无重边图,使得从1走到n的所有路径长度在L,R之间,且每种长度的路径只有唯一一条,$L,R\le 1e6$ ...
- 迷宫问题，打印所有路径，深度搜索，dfs
#include<iostream> using namespace std; int maze [5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0 ...