多图片上传可删除 [原创]

浏览：1697次- 评论：2次- 发布时间：2019-01-18

Html

Css






    
        注：每张照片大写不可超过4M
        
            
                
                
                    +
                    点击上传

.imageDiv {
	display:inline-block;
	width:100px;
	height:100px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:1px dashed darkgray;
	background:#f8f8f8;
	position:relative;
	overflow:hidden;
	margin:10px
}
.cover {
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background-color:rgba(0,0,0,.3);
	display:none;
	line-height:99px;
	text-align:center;
	cursor:pointer;
}
.cover .delbtn {
	color:red;
	font-size:20px;
	font-style:normal;
}
.imageDiv:hover .cover {
	display:block;
}
.addImages {
	display:inline-block;
	width:100px;
	height:100px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:1px dashed darkgray;
	background:#f8f8f8;
	position:relative;
	overflow:hidden;
	margin:10px;
}
.clickUpload {
	text-align:center;
	display:inline-block;
	align-items:center;
	justify-content:center;
	width:100%;
	padding:5px 0;
}
.clickUpload span {
	font-size:40px;
}
.fileUpload {
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100px;
	opacity:0;
}

//图片上传预览功能
 var userAgent = navigator.userAgent; //用于判断浏览器类型

$(".fileUpload").change(function() {
     //获取选择图片的对象
     var docObj = $(this)[0];
     var picDiv = $(this).parents(".fileImgDiv");
     //得到所有的图片文件
     var fileList = docObj.files;
     //循环遍历
     for (var i = 0; i < fileList.length; i++) {
         //动态添加html元素
         var picHtml = "<div class='imageDiv' > <img style='object-fit:cover;' id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
         console.log(picHtml);
         picDiv.prepend(picHtml);
         //获取图片imgi的对象
         var imgObjPreview = document.getElementById("img" + fileList[i].name);
         if (fileList && fileList[i]) {
             //图片属性
             imgObjPreview.style.display = 'block';
             imgObjPreview.style.width = '100px';
             imgObjPreview.style.height = '100px';

//imgObjPreview.src = docObj.files[0].getAsDataURL();
             //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
             if (userAgent.indexOf('MSIE') == -1) {
                 //IE以外浏览器
                 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                 console.log(imgObjPreview.src);
                 // var msgHtml = '<input type="file" id="fileInput" multiple/>';
             } else {
                 //IE浏览器
                 if (docObj.value.indexOf(",") != -1) {
                     var srcArr = docObj.value.split(",");
                     imgObjPreview.src = srcArr[i];
                 } else {
                     imgObjPreview.src = docObj.value;
                 }
             }
         }
     }

/*删除图片功能*/
     $(".delbtn").click(function() {
         var _this = $(this);
         _this.parents(".imageDiv").remove();
     });
 });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：多图片上传可用于pc端移动端例如添加评论图片上传图片轮播等(原创)

1:多图片上传,可用于pc端移动端,例如添加评论图片,上传图片轮播等;

2:pc端鼠标移入出现删除,反之移动端鼠标点击出现删除;

3:注意头部的视口标签,使移动端也可以正常使用;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, user-scalable=no">
属性介绍:

width 正整数或 device-width 定义视口的宽度，单位为像素
height 正整数或 device-height 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes
4:多图片上传是常用示例(添加评论图片,上传图片轮播图等);

讨论这个常用代码（2）回答他人问题或分享心得会奖励牛币

Lv4 码徒

mi***tu

2019年02月16日

附件必备

Lv4 码徒

qq***15

2020年07月24日

js调用的版本在哪下载？

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取