html里关于多图上传、点击删除、点击放大功能整合

最新推荐文章于 2024-01-04 19:02:05 发布
最新推荐文章于 2024-01-04 19:02:05 发布
阅读量2.2k 收藏 15
点赞数 7
CC 4.0 BY-SA版权
文章标签： html 多图上传 图片点击删除 图片点击放大 上传图片的各种功能整合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ABINPYB/article/details/99599802
本文分享了一套完整的多图片上传、预览、放大及删除功能的代码实现，包括HTML、CSS和JS部分，适用于网页应用开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在多图片上传和点击删除和点击放大预览功能开发时，总是无法找到完整的代码。
在结合各个资料和自己的研究后，总结出了以下代码。
包括的功能有：多图上传、点击删除图片、点击放大预览。
关于保存按钮过于复杂，后面会加以补充。
先来看看效果图
初始化页面初始化页面

上传图片的样子添加图片后

在这里插入图片描述
图片点击放大预览，这里添加了一个遮罩层的效果
在这里插入图片描述
删除图片的效果 ，右上角x是一张图片，添加了点击删除的事件

代码部分：
html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片上传预览点击放大</title>
    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        </head>
        <body>
		<div class="filterPop" onclick="toHide()"></div>
		<div class="setPops">
		    <img src="" alt="" width="100%" height="100%">
		</div>   <!-- 添加遮罩层 -->
		
		<div class="Box">图片上传</div>
		<div class="Box1">
			<div class="productImg">
				<div id="uploadBox"></div> 
				<div class="uploadDIv">
					<span>+</span><input type="file" name="file" multiple="multiple" id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
				</div>
			</div>
		</div>
</body>
</html>

css：

img {
	width: 100%;
	display: block;
	border: none;
	vertical-align: bottom;
	border: none;
}

.Box1 {
   background-color: #FEFEFF;
    color: #333333;
    font-size: 18px;
    border: 2px solid #088DEA;
    margin-top: 5%;
    margin-left: 5%;
    width: 90%;
}
.Box {
    height: 40px;
    margin-left: 6%;
    line-height: 65px;
    font-size: 18px;
    font-family: FangSong;
    font-weight: bold;
}
.productImg {
height: 530px;
overflow: hidden;
} 
.imgBiMG{
    width: 20%;
    height: 84px;
    float: left;
    display: block;
    margin-left: 7%;
    margin-top: 2%;
}
.uploadDIv {
    width: 95px;
    height: 75px;
    background-color: #edf0f2;
    font-size: 70px;
    color: #bfbfbf;
    text-align: center;
    line-height: 75px;
    float: left;
    position: relative;
    left: 7%;
    top: 5%;
}
.uploadDIv input {
	width: 78px;
	height: 78px;
	opacity: 0;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 4;
	padding: 0;
}

.setPops{width: 70%;
    position: absolute;
    left:15%;
    top:50%;
    z-index: 10;
    overflow: hidden;
    display: none;
}
.filterPop{
    background: rgba(0,0,0,.5);
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    z-index: 9;
    overflow: hidden;
    display: none;
}

js:

<script src="../js/jquery.1.10.2.js"></script> //引用jquery，任何版本都行
<script type="application/javascript">
var i = 0;
$(function() {
	var img = []; //创建一个空对象用来保存传入的图片
	var AllowImgFileSize = '1024'; //1兆
	$("#inputs").change(function() {
	var fil = this.files;
	for(var i = 0; i < fil.length; i++) {
    	var curr = fil[i].size;
    	if(curr > AllowImgFileSize * 1024) { //当图片大于99兆提示
    		layer.msg("图片文件大小超过限制 请上传小于1M的文件");
    	} else {
	    	reads(fil[i]);
	    	img.push(fil[i]); // 将传入的图片push到空对象中
    	}
	}
	if(img.length >= 9) { //判断图片的数量，数量不能超过6张
	$('.uploadDIv').hide();
	} else {
	$('.uploadDIv').show();
	}
	});
	})
	function removethis(i){
	
	$("#img"+i+"").remove()
	if($("#uploadBox").children().length<9){
		$('.uploadDIv').show();
	}
}
function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);	 
reader.onload = function() {
document.getElementById("uploadBox").innerHTML += "<div id='img"+i+"' class='divImg' id='uploadImg'><img onclick='showpicture(this)' src='" + reader.result + "' class='imgBiMG'><img style='width: 5%; float: left;margin-top: 2%; display: block; display: block;' src='../image/sc.png' onclick='removethis("+i+")'></div>";
i++
}
}

//添加点击图片放大
function showpicture(pic){
	$(".filterPop").css("display","block")
	 var setPopsWidth=$(".setPops").width();
    $(".setPops, .filterPop").fadeIn();
    $(".setPops").css({height:setPopsWidth,marginTop:-setPopsWidth/2+"px"});
    $(".setPops").children("img")[0].src=pic.src;
}
function toHide() {
    $(".setPops, .filterPop").fadeOut()
}
</script>

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片上传预览点击放大</title>
    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        

</head>

 <style type="text/css">
img {
	width: 100%;
	display: block;
	border: none;
	vertical-align: bottom;
	border: none;
}

.Box1 {
   background-color: #FEFEFF;
    color: #333333;
    font-size: 18px;
    border: 2px solid #088DEA;
    margin-top: 5%;
    margin-left: 5%;
    width: 90%;
}
.Box {
    height: 40px;
    margin-left: 6%;
    line-height: 65px;
    font-size: 18px;
    font-family: FangSong;
    font-weight: bold;
}
.productImg {
height: 530px;
overflow: hidden;
} 
.imgBiMG{
    width: 20%;
    height: 84px;
    float: left;
    display: block;
    margin-left: 7%;
    margin-top: 2%;
}
.uploadDIv {
    width: 95px;
    height: 75px;
    background-color: #edf0f2;
    font-size: 70px;
    color: #bfbfbf;
    text-align: center;
    line-height: 75px;
    float: left;
    position: relative;
    left: 7%;
    top: 5%;
}
.uploadDIv input {
	width: 78px;
	height: 78px;
	opacity: 0;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 4;
	padding: 0;
}

.setPops{width: 70%;
    position: absolute;
    left:15%;
    top:50%;
    z-index: 10;
    overflow: hidden;
    display: none;
}
.filterPop{
    background: rgba(0,0,0,.5);
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    z-index: 9;
    overflow: hidden;
    display: none;
}

 </style>

<body>
		<div class="filterPop" onclick="toHide()"></div>
		<div class="setPops">
		    <img src="" alt="" width="100%" height="100%">
		</div>   <!-- 添加遮罩层 -->
		
		<div class="Box">图片上传</div>
		<div class="Box1">
			<div class="productImg">
				<div id="uploadBox"></div> 
				<div class="uploadDIv">
					<span>+</span><input type="file" name="file" multiple="multiple" id="inputs" accept="image/*" class='fileTest' multiple="multiple" />
				</div>
			</div>
		</div>
</body>
<script src="../js/jquery.1.10.2.js"></script>
<script type="application/javascript">
var i = 0;
$(function() {
	var img = []; //创建一个空对象用来保存传入的图片
	var AllowImgFileSize = '1024'; //1兆
	$("#inputs").change(function() {
	var fil = this.files;
	for(var i = 0; i < fil.length; i++) {
    	var curr = fil[i].size;
    	if(curr > AllowImgFileSize * 1024) { //当图片大于99兆提示
    		layer.msg("图片文件大小超过限制 请上传小于1M的文件");
    	} else {
	    	reads(fil[i]);
	    	img.push(fil[i]); // 将传入的图片push到空对象中
    	}
	}
	if(img.length >= 9) { //判断图片的数量，数量不能超过6张
	$('.uploadDIv').hide();
	} else {
	$('.uploadDIv').show();
	}
	});
	})
	function removethis(i){
	
	$("#img"+i+"").remove()
	if($("#uploadBox").children().length<9){
		$('.uploadDIv').show();
	}
}
function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);	 
reader.onload = function() {
document.getElementById("uploadBox").innerHTML += "<div id='img"+i+"' class='divImg' id='uploadImg'><img onclick='showpicture(this)' src='" + reader.result + "' class='imgBiMG'><img style='width: 5%; float: left;margin-top: 2%; display: block; display: block;' src='../image/sc.png' onclick='removethis("+i+")'></div>";
i++
}
}

//添加点击图片放大
function showpicture(pic){
	$(".filterPop").css("display","block")
	 var setPopsWidth=$(".setPops").width();
    $(".setPops, .filterPop").fadeIn();
    $(".setPops").css({height:setPopsWidth,marginTop:-setPopsWidth/2+"px"});
    $(".setPops").children("img")[0].src=pic.src;
}
function toHide() {
    $(".setPops, .filterPop").fadeOut()
}
</script>

</html>

完成搞定。

ABINPYB
关注
html实现上传多张图片
ABINPYB的博客
08-12 8416
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> body { background: #edf0f2; } img { width: 100%; display: bloc...
html + js实现多张图片上传、预览和删除
qq_39987952的博客
11-21 6208
最近做毕业设计，其中有一部分需要做个网页展示效果，网页上需要进行图片的上传。然后去学习了下js，（上传到后台处理和上传后在网页上显示，这里是选择文件后在页面上显示图片）。 部分实现参考了博主https://blog.youkuaiyun.com/huangzhaoyu123/article/details/104617230的代码，感谢。 但是原博主上传多张图片，没有对图片进行排版，图片显示很杂乱，另外看了一下他的删除好像是直接隐藏相关元素。于是重新修改了一下，使用了一个table和滚动条。将所有的图片存放在表格里，表
上传图片，多图上传，预览功能，js原生无依赖
weixin_33901926的博客
03-06 266
最近很好奇前端的文件上传功能，因为公司要求做一个支持图片预览的图片上传插件，所以自己搜了很多相关的插件，虽然功能很多，但有些地方不能根据公司的想法去修改，而且需要依赖jQuery或Bootstrap库，所以我就想学下图片上传的原理，试着做一个原生无依赖，而且足够灵活的图片上传插件。话不多说，开整。 1. 大体思路 1.1 首先我们需要考虑用户如何使用我们的插件。 用户引入插件代码后，只需要像下面这...
html 多图片上传功能
一休求索
12-31 1680
因为涉及到业务部分，前端html代码需要支持上传图片，同时获取上传图片后组装成json地址，将地址存储到mysql中，其中数据库存储的图片地址采用json格式： 最终实现的效果如: [{"path": "http://192.168.2.150:8089/wisdom/81ecdaf8-e1d9-4f33-b7ee-39888a2d860f.png"}, {"path": "http://192.168.2.150:8089/wisdom/a0f15d75-922d-42ba-affa-f9603c.
html图片上传自动清空,基于JQuery实现图片上传预览与删除操作
weixin_42508185的博客
06-03 587
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码，经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器，供大家参考，具体内容如下1. preview.2.0.html上传图片预览$(function(){var p = new ImgPreview();p.preview({previewid:"imgupload1"});p.preview({previewi...
jQuery图片上传插件，支持批量上传、预览、删除、放大、上传数量、上传大小、追加方式配置以及上传前、上传后和删除的回调函数
07-09
删除操作一般通过JavaScript绑定点击事件，触发删除请求，而放大功能可能涉及到图片的缩放算法，如CSS3的transform属性或JavaScript的图像处理库。 上传数量和上传大小的限制是服务器端为了防止恶意上传和优化存储...
轻量级jQuery图片上传插件，支持预览与多文件管理
资源摘要信息:"本资源提供了一套完整的jQuery图片批量上传插件源码，支持...通过整合以上知识点，开发者可以深入了解并掌握使用jQuery图片批量上传插件源码，完成具有图片上传、预览、删除和放大等功能的网页功能模块。
利用jQuery实现图片相册带对话框提示功能
例如，可以为相册图片添加点击事件，当用户点击图片时触发放大查看的操作。 #### jQuery动画 jQuery的动画方法可以用来实现相册图片的放大效果。`fadeIn()`、`fadeOut()`、`slideToggle()`等方法能够实现元素的渐变...
jQuery支持图片预览上传代码
06-24
"jQuery支持图片预览上传代码"提供了一种高效且用户友好的解决方案，它整合了多项功能，如图片预览、图片放大查看、删除以及相册管理等。下面我们将详细探讨这些功能及其背后的实现原理。 1. **图片预览**： 在...
用pyecharts生成仪表盘——将多张图片汇总到一个页面，大屏可视化数据展示
热门推荐
bo_gu的博客
03-20 2万+
（前情提要）我爬了拉勾网搜索“设计”职位的招聘信息，详见Python爬虫获取拉勾网招聘信息并用pyecharts画了地图Geo,Map，条形图，饼图，词云图以及箱线图。详见拉勾网“设计”职位数据分析之用pyecharts画地图Geo,Map，拉勾网“设计”职位数据分析之用pyecharts画条形图Bar，拉勾网“设计”职位数据分析之用pyecharts画饼图（南丁格尔图玫瑰图）Pie，拉勾网“设计...
简单的多张图片上传和删除
12-03
这是我自己写的简单的多图片上传和取消，希望对大家有帮助！
html多图片上传并在线预览
01-10
html多图片上传并在线预览 用javascript实现
html5多图片上传预览
09-29
html5多图片上传，可显示多图上传之后的预览效果。
HTML5多张图片上传删除代码.zip
05-24
HTML5多张图片上传删除代码，点击按钮浏览长传，有删除图片功能。
HTML点击图片放大
03-24
纯HTML和JS,CSS实现的点击图片,图片放大的功能
HTML 手机端点击图片放大
qq_42617840的博客
09-24 1657
<html> <head> <style> .over {position: fixed; left:0; top:0; width:100%; z-index:100;} .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;} ...
HTML如何设置多图片上传，并限制格式类型
最新发布
猿小白的博客
01-04 1140
上面这行代码，只支持单个文件上传，且不支持文件类型过滤，在实际开发过程中，我们经常遇到会上传多张图片，并且有时候对上传的图片后缀格式有一定限制要求。那么我们可以用下面这行代码实现多图片文件上传，并限制格式为jpg和png格式。最后我们应该如何获取上传图片信息呢？我们可以用JavaScript来获取上传的图片信息。在HTML如何设置多图片上传，并限制格式类型为jpg和png格式。
用html5 拍照+多图片上传、删除图片、查看图片
jazhenglufang的博客
12-02 2066
用html5中的 file 调用手机拍照以及多图片上传功能，可进行删除图片、放大查看图片，网页版多文件上传也可以用。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello MUI</title> <meta na...
html点击图片放大_演练 缩放效果 划到图片上图片放大的效果 css 1002
weixin_39940182的博客
11-29 427
演练 缩放效果 划到图片上图片放大的效果 css 1002​www.ixigua.com演练 缩放效果 划到图片上图片放大的效果 css 1002图片素材开发思路鼠标划到图片上时让图片放大让图片添加过渡 效果给父盒子设置一个溢出隐藏代码<!doctype html> <html lang="en"> <head> <meta charset="UT...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值