利用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搭建的项目,首先看下项目结 ...

随机推荐

VS Code调试C代码
1.前言首先说明的是vscode是代码编辑器,并不是编译器,它本身并不能编译C语言. 在这里我们使用的是MinGW-w64作为C语言的编译器.MinGW-w64的前身是MinGW的全称是:Minim ...
Swagger整合Jwt授权配置
Swagger整合Jwt授权配置欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章http://www.javaman.cn/sb2/swagger-jwt 一.Swagger入门 ...
07 Java的方法何谓方法
Java的方法 1.何谓方法 System.out.println(); 那么它是什么呢? System是系统的类,out是System下的一个输出对象,println()就是一个方法类.对象.方法 ...
Java：基于AOP的动态数据源切换（附源码）
1 动态数据源的必要性我们知道,物理服务机的CPU.内存.存储空间.连接数等资源都是有限的,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈.而在复杂的互联网业务场景下,系统流量日益膨 ...
AQS 源码解读之加锁篇
以 ReentrantLock 创建的非公平锁为基础,进行 AQS 全流程的分析. 分析 demo 一共有 A.B.C 三个线程. public class AQSDemo { // 带入一个银行办理 ...
JSON.parse()和JSON.stringfy()区别
JSON.parse() 用于从一个json格式字符串解析出json类型的数据,如: 注意事项:json格式字符串必须是写在一排的,且括号外面用单引号,里面的每一个字符串用双引号 JSON.strin ...
C# 委托应用总结（委托,Delegate,Action,Func,predicate）
C# 委托应用总结一.什么是委托 1.1官方解释委托是一种定义方法签名的类型.当实例化委托时,您可以将其实例与任何具有兼容签名的方法相关联.您可以通过委托实例调用方法. 1.2个人理解委托就是执 ...
Java的重载以及与重写的区别
一.什么是方法重载方法的重载就是在同一个类中,有着若干个名字相同的方法.在具体调用这些方法的时候,通过传递参数的不同来调用这些重载方法. 二.为什么需要方法重载方法名的定义需要做到见名知意,功能类 ...
Mysql查询优化器之关于JOIN的优化
连接查询应该是比较常用的查询方式,连接查询大致分为:内连接.外连接(左连接和右连接).自然连接下图展示了 LEFT JOIN.RIGHT JOIN.INNER JOIN.OUTER JOIN 相关的 ...
Mysql之B+树索引实战
索引代价空间上的代价一个索引都对应一棵B+树,树中每一个节点都是一个数据页,一个页默认会占用16KB的存储空间,所以一个索引也是会占用磁盘空间的. 时间上的代价索引是对数据的排序,那么当对表中的 ...

利用HTML5和css3 选中图片上传到服务器，插件地址如下

利用HTML5和css3 选中图片上传到服务器，插件地址如下的更多相关文章

随机推荐

热门专题