html实现上传多张图片_html上传多张图片-程序员宅基地

技术标签: 纯css和js实现  html上传图片  上传多张图  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
 body {
background: #edf0f2;
}
img {
width: 100%;
display: block;
border: none;
vertical-align: bottom;
border: none;
}
input[type="button"] {
-webkit-appearance: none;
}
.productDrawingBox {
background-color: #fcfcfc;
color: #333333;
font-size: 16px;
padding-left: 11px;
border-bottom: solid 1px #e5e5e5;
}
.productDescription {
height: 44px;
line-height: 44px;
}
.productImg {
height: 96px;
overflow: hidden;
} 
.imgBiMG{
width: 78px;
height: 81px;
float: left;
display: block;
}
.uploadDIv {
width: 78px;
height: 81px;
background-color: #edf0f2;
font-size: 28px;
color: #bfbfbf;
text-align: center;
line-height: 81px;
float: left;
position: relative;
}
.uploadDIv input {
width: 78px;
height: 78px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
z-index: 4;
padding: 0;
}
</style>
</head>
<body>
<div class="productDrawingBox">
<div class="productDescription">上传图片</div>
<div class="productImg">
<div id="uploadBox">
</div> 
<div class="uploadDIv">
<span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
	var img = []; //创建一个空对象用来保存传入的图片
	var AllowImgFileSize = '101376'; //1兆
	$("#inputs").change(function() {
	var fil = this.files;
	for(var i = 0; i < fil.length; i++) {
	var curr = $('#inputs')[i].files[0].size;
	if(curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
	layer.msg("图片文件大小超过限制 请上传小于99M的文件");
	} else {
	reads(fil[i]);
	img.push($('#inputs')[i].files[0]); //将传入的图片push到空对象中
	}
	}
	if(img.length >= 6) { //判断图片的数量,数量不能超过3张
	$('.uploadDIv').hide();
	} else {
	$('.uploadDIv').show();
	}
	console.log(img);
	});
	
	function reads(fil) {
	var reader = new FileReader();
	reader.readAsDataURL(fil);	 
	reader.onload = function() {
	document.getElementById("uploadBox").innerHTML += "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
	}
	}
	})
 </script>
</html>

只能用于上传多张图片的功能,在代码里能修改上传图片的数量和大小,以下是效果图

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ABINPYB/article/details/99329363

智能推荐

斗地主——找出顺子的算法-程序员宅基地

文章浏览阅读2k次。1 static List<crads> shuen(List<crads> list) 2 { 3 List<crads> cList = new List<crads>(); 4 for (int i = 0; i < list.Count;++i) ...

Thinkpad T460P安装win7_t460p支持win7吗-程序员宅基地

文章浏览阅读2.1w次。Thinkpad T460P安装win7 Skylake平台装Windows7_t460p支持win7吗

百事可乐⋅顺风车⋅迷路⋅出租车_百事顺风车-程序员宅基地

文章浏览阅读1.4k次。亲身经历的四段小事,早想写出来,一直拖到现在。今日做个小记,待日后慢慢品味。百事可乐 09年年初初来京时,居住在一个偏僻的村子里,村子虽小,日常生活都可以在这里解决。当时收入不多,为了省钱,每天早晨都会去一家简陋的小馆子里吃“炸油饼”。去的多了,渐渐的就与馆子的老板_百事顺风车

Android请求网络数据,json解析-FastJson遇到的问题 首字母大写问题_android网络请求大小写问题-程序员宅基地

文章浏览阅读842次。在Android app开发过程中,用fastjson获取后台数据,后台返回的数据:[{"doseFrequencyList":[{"FrequencyCode":"ed","name":"每天","ordinal":"1"},{"FrequencyCode":"iod","name":"隔天","ordinal":"2"},{"FrequencyCode":"iow","name":"隔周","_android网络请求大小写问题

cheerio制作markDown索引目录_toc-wrapper-程序员宅基地

文章浏览阅读235次。原文链接:Bougie的博客 制作目录索引这种东西当然是放在前端方便。选择放在后端一是为了了解Node后端生态,掌握更多后端技术;二是因为公司实行前后端分离的方式开发,睾贵的JAVA后端经常啥也不做处理就返回一个row数据(甚至有时时间戳都不处理),对此有些无语。最终目标 1. 点击索引单项跳转到相应标题 2. 大号标题包含小号标题,小号标题向右缩进 3. 滚动页面时自..._toc-wrapper

RESTEasy:@FormParam、@PathParam、@QueryParam、@HeaderParam、@CookieParam、@MatrixPara-程序员宅基地

文章浏览阅读151次。介绍:In the first RESTEasy tutorial we have learnt the basics about REST Web services and we have tested a simple RESTful Web service. In this tutorial we willshow how to inject web application eleme..._@headerparam@queryparam

随便推点

山东春考计算机本科学校分数线,2016年山东春季高考各校计算机专业录取分数线分别是多少?...-程序员宅基地

文章浏览阅读1.4k次。2016年山东春季高考各校计算机专业录取分数线分别是多少?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!2016年山东春季高考各校计算机专业录取分数线分别是多少?2016年山东春季高考各校计算机专业录取分数线分别是多少?1、2016年全国各省份高考成绩及各批次控制分数线公布时间都集中在6月23-26日之间,预测的分数线..._山东滨州学院计算机专业春考本科分数线

Asp.net 2.0自定义控件(点击HyperLink后执行事件)[网友问题: DataList里HyperLink控件激发事件,在哪定义?]...-程序员宅基地

文章浏览阅读151次。(一). 概述HyperLink默认没有Click事件, 重写了一个HyperLink自定义控件. 实现原理: 默认Hyperlink是跳到点击请求的页面, 本HyperLink自定义控件最终也是跳转到请求的页面, 但期间执行了自己的一个方法, 我们可以在此方法中添写自己所需的功能. 本示例演示统计此超链接点击次数功能. [参考Asp.net 2.0高级编程](二). 代..._hyperlink控件后台点击方法

HBASE 启动报错 Can't get connection to ZooKeeper: KeeperErrorCode = ConnectionLoss for /hbase-程序员宅基地

文章浏览阅读9k次,点赞3次,收藏6次。查看防火墙状态$ service iptables status关闭防火墙$ service iptables stop查看防火墙状态$ service iptables status停止hbase$ stop-hbase.sh启动hbase$ start-hbase.sh_can't get connection to zookeeper: keepererrorcode = connectionloss for /hba

华为智慧屏鸿蒙系统手工升级,华为的“中场战事”:升级智能家居、推鸿蒙智慧屏,重构IoT赛道?...-程序员宅基地

文章浏览阅读324次。进一步切入全屋智能、大屏、车机等全场景。2020年,华为消费者业务的产品线纵深正进一步拓展。12月21日,华为面向家庭、出行场景正式发布了三大系列产品。其一是华为智能家居战略及全屋智能解决方案,顾名思义,是提升家居生活智能化的软硬件体系;其二是华为智慧屏S系列,搭载了鸿蒙OS最新版本,该系列是华为智慧屏家族的新成员,产品定位中低端市场,拥有55、65、75寸三种屏幕尺寸共6款机型;其三是车载智慧屏...

CMenu类中禁用/变灰某一项-程序员宅基地

文章浏览阅读322次。CMenu::EnableMenuItem启用、 禁用,或变暗的菜单项。UINT EnableMenuItem(UINT nIDEnableItem, UINT nEnable);参数nIDEnableItem根据所指定的菜单项,若要启用,nEnable。 弹出菜单项,以及标准菜单项,可以指定此参数。nEnable指定要执行的操作。 它可以是组合的M..._cmenu 菜单项置灰

php扩展memcached、memcache、redis的安装配置方法-程序员宅基地

文章浏览阅读167次。php连接memcached缓存服务器的客户端有两个,一个是memcache是比较底层的开发库,memcached是比较新的开发库,php安装这两个扩展中的任意一个后就可以在编写php代码时使用的memcached缓存数据,达到缓存php执行的结果1、安装memcachetar -zxvfmemcache-2.2.7.tgzcdmemcache-2.2.7/usr/loc..._群晖添加phpredis扩展

推荐文章

热门文章

相关标签