利用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搭建的项目,首先看下项目结 ...
随机推荐
- jq全选、全不选、反选、单删、批量删除
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- nginx 访问php文件报错
问题图: An error occurred. 解决方法(windows版) php.cgi没有启动 cmd中找到cig.exe 的位置然后运行 php-cgi.exe -b 127.0.0.1: ...
- 1、mysql数据库的数据目录结构
查看mysql的主要目录结构 通过命名查看mysql的目录结构:find / -name mysql 1.1数据库文件的存放路径 MySQL数据库文件的存放路径:/var/lib/mysql/ 1.2 ...
- ArcMap问题及解决方案
1.导出的矢量文件dbf格式用Excel打开后全是乱码怎么解决? 该类问题的部分解决方案是将数据用[表转Execl ] 工具转出来 能根本解决的方法是修改注册表 详细解决方案是: 乱码解决办法:①快捷 ...
- 基于selenium实现河海大学自动健康打卡
0.每日健康打卡有点烦 1.所用方法:selenium:需要下载响应浏览器的webdriver 2.注意事项,我感觉唯一要注意的就是页面跳转以后应该怎么操作了(那个时候困扰了我好几天) 3.相应代码: ...
- pycharm远程调试、开发（详细操作）
如果仅是远程开发,新建 ssh Interpreter 并 apply tools -> deployment -> browser remote host 即可 1.服务器侧准备 准备调 ...
- OpenCv基础_三
轮廓检测 图像金字塔 上采样,图像变大一倍,矩阵用0填充 img = cv2.imread('1,jpg') cv_show('img',img) up = cv2.pyrUp(img) cv_sho ...
- S2-048（RCE远程代码执行）
环境搭建: https://blog.csdn.net/qq_36374896/article/details/84145020 进入漏洞环境 cd vulhub-master/struts2/s2- ...
- React算法复杂度优化？
react树对比是按照层级去对比的, 他会给树编号0,1,2,3,4.... 然后相同的编号进行比较.所以复杂度是n,这个好理解. 关键是传统diff的复杂度是怎么算的?传统的diff需要出了上面的比 ...
- springmvc对参数接收的两个注解@RequestParam和@RequestBody
@RequestParam 作用:将请求参数绑定到控制器的方法参数上,主要用于接收几班类型参数 语法:@RequestParam(value="参数名",required=&quo ...