多图上传

曹え 5811 发布于：2022-08-30 02:34:28

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>
body {
  	margin: 0;
  	padding: 0;
  	max-width: 414px;
  	margin: 0 auto;
  }

  .upload-fh {
  	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAD1klEQVRoQ+XbTYhWVRgH8P8fwZUguFKi2pShbvqg2lhhG0PJlc40zQg62WhDg+jklIo1wViUNgwVTGSWWMngyvCjVdLHLrHaJaOBIIK2DHL7lweegcvL48D7vveee7xztu+d972/Ofec8zznPJe4T5qkRQC2AVgP4A8AMySvt3v7bPcP6rhe0lIAJwFsKvz+CZLb272f7MGSHnDsiy24WZKPNQosyUDWs88EsEGS3zQGLOkpx64OUG+T/LhdrF2f5SMt6QXHPhSghklOd4LNEixpo2OXBaitJL/rFJsdWFKvYxe3oO4A6Cd5phtsVmBJrwH4KgD9C+BVkj91i80GLGk3gKkA9I9jfy8DmwVY0kEAEwHoL8f+XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/KxtbG1iSRUiWCLS2045VFdjkYEm23HwPYHMAOk5yR1XQue9NFmlJskDCsC8FqCmSe6rGJuthSRYiGnZtgJogeSgFNglYkgX/hn08QI2RPJIKWzlYkqV1hn0kQL1B8ouU2ErBkixhN+zyADVA0j5L3iqZtCTZVoyBlrSILAmwNfZscqn/YOlgSf0AohTOkoBekj/XhS39kZa0E0A0Li0JMOzlOrGlgiWNAjgagCwJ6CF5tW5saWBJ7wEYD0CWBBj2Vg7YUsCSbB19KwBdcOz/uWC7BkuyzbRdAchOBfpygs7dS8eztKRvAQwEqGMkh3LEdtzDkj4CMBagJkna5JVt66iHJUX56jjJ97OVdhN4SLJtGdueaW3N7GFTLqgxPNetC2qWLqDtUGtf8Hif93CyOetwAf0ugGjC+tXRzYm0Cui9AD4JevpPRzcnli6gXwfwZYC+5mGm4WttHa3D892xJAspTwXX3Pae/qVOcelgX7JednS042F58bm60JWAHb3Ot3lWBDg7N5qpA10Z2NFPO/rRADdE8lhqdKVgR69y9BMBbpTkZEp05WBHP+jo5wJc0qQjCdjRdrZkOfSGAJ0s6UgGdrSdHhq6J0An2ThICi4EKMcBDAZom7mtgKUZ58NFoCQrYrFiltZmSYehm1MBUOjpwwAOBGhLOgzdnBqPAno/gA8CtMXdhr5S5rJVyxhuBUgaAfBpALOkw9CXykJnAfYZ3Iq9vw5glnQY+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/GrawkT2vFfVPhz0aLPqpQvoJx29JkA3qyK+gF7p6GcD9AjJz9sd09mN4WDJutdbLTdIRq8IzPs/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==');
  	background-repeat: no-repeat;
  	background-size: 100% 100%;
  	height: 30px;
  	width: 30px;
  }

  .upload-textarea {
  	width: 100%;
  	height: 60px;
  	font-size: 28px;
  	border: 1px solid #efefee;
  	max-height: 300px;
  }

  .upload-article-text {
  	width: 100%;
  	padding: 10px;
  	box-sizing: border-box;
  }

  .upload-file {
  	position: relative;
  	background: url('../images/z_add.png') no-repeat 50%/100% 100%;
  	/* width: 100px; */
  	height: 120px;
  	order: 9;
  }

  .upload-piclist {
  	padding: 0 10px;
  	box-sizing: border-box;
  	display: grid;
  	grid-template-columns: repeat(3, 120px);
  	justify-content: space-between;
  	grid-gap: 14px;
  }

  #file {
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  }

  .upload-Picitem {
  	width: 100%;
  	height: 120px;
  }

  .upload-Picitem>img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }

  .submit {
  	padding: 15px 0;
  	background-color: #287cff;
  	color: #fff;
  	text-align: center;
  	margin: 10px;
  	font-size: 20px;
  	border-radius: 10px;
  }

  .upload-sm {
  	padding: 10px;
  	box-sizing: border-box;
  	color: gray;
  }

  .upload-sm ol>li {
  	margin-bottom: 10px;
  }
</style>
</head>    
<body>     
<section class="upload-section">    
<article class="upload-article-text">    
<textarea oninput="autoTextarea(this)" placeholder="发布内容" class="upload-textarea"></textarea>    
</article>    
<article class="upload-piclist">    
<div class="upload-file">    
<input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>    
</div>    
</article>    
<div class="submit" onclick="submit()">    
发布    
</div>    
</section>    
<div class="upload-sm">    
	<p>说明：</p>    
	<ol>    
	 	<li>图片限制只能上传9张，如需修改请看js(picmax)。</li>    
		<li>点击发布按钮后会控制台将会打印出你所输出的内容及一个已转为base64格式的图片列表。</li>    
		<li>此项目为原生js编写不含任何插件。</li>    
	</ol>    
</div>    
<script src="js/index.js"></script>    
</body>    
</html>

index.js

let picmax = 9; //限制上传数量 
function imgChange() {
	let file = document.getElementById('file').files;
	let imglist = document.querySelectorAll('.upload-Picitem');
	let piclist = document.getElementsByClassName('upload-piclist')[0];
	let filelist = file.length + imglist.length > picmax ? 9 - imglist.length : file.length + imglist.length;
	if (file.length + imglist.length >= 9) {
		let uploadfile = document.getElementsByClassName('upload-file')[0]
		uploadfile.style.display = "none"
	}
	for (let i = 0; i < filelist; i++) {
		readerfile(file[i]).then(e => {
			let html = document.createElement('div');
			html.className = 'upload-Picitem'
			html.innerHTML = '<img src=' + e + ' alt="pic">'
			piclist.appendChild(html);
		})
	}
}

function readerfile(file) {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		reader.addEventListener("load", function() {
			resolve(reader.result);
		}, false)
		if (file) {
			reader.readAsDataURL(file)
		}
	})
}

//提交
function submit() {
	let imglist = []
	let text = document.getElementsByClassName('upload-textarea')[0].value
	let piclist = document.querySelectorAll('.upload-Picitem');
	for (let i = 0; i < piclist.length; i++) {
		imglist.push(piclist[i].lastChild.src)
	}
	console.log("发布内容：", text)
	console.log("图片列表：", imglist)
}


//textarea高度自适应
var autoTextarea = function(elem, extra, maxHeight) {
	extra = extra || 0;
	var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
		isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
		addEvent = function(type, callback) {
			elem.addEventListener ?
				elem.addEventListener(type, callback, false) :
				elem.attachEvent('on' + type, callback);
		},
		getStyle = elem.currentStyle ? function(name) {
			var val = elem.currentStyle[name];

			if (name === 'height' && val.search(/px/i) !== 1) {
				var rect = elem.getBoundingClientRect();
				return rect.bottom - rect.top -
					parseFloat(getStyle('paddingTop')) -
					parseFloat(getStyle('paddingBottom')) + 'px';
			};

			return val;
		} : function(name) {
			return getComputedStyle(elem, null)[name];
		},
		minHeight = parseFloat(getStyle('height'));

	elem.style.resize = 'none';

	var change = function() {
		var scrollTop, height,
			padding = 0,
			style = elem.style;

		if (elem._length === elem.value.length) return;
		elem._length = elem.value.length;

		if (!isFirefox && !isOpera) {
			padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
		};
		scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

		elem.style.height = minHeight + 'px';
		if (elem.scrollHeight > minHeight) {
			if (maxHeight && elem.scrollHeight > maxHeight) {
				height = maxHeight - padding;
				style.overflowY = 'auto';
			} else {
				height = elem.scrollHeight - padding;
				style.overflowY = 'hidden';
			};
			style.height = height + extra + 'px';
			scrollTop += parseInt(style.height) - elem.currHeight;
			document.body.scrollTop = scrollTop;
			document.documentElement.scrollTop = scrollTop;
			elem.currHeight = parseInt(style.height);
		};
	};

	// addEvent('propertychange', change);
	// addEvent('input', change);
	// addEvent('focus', change);
	change();
};

原文地址：https://www.jq22.com/demo/jsappupload202005111145/

上传 h5上传

觉得有用请点个赞吧！

0 1209

99元开通年度会员！
1000+模块代码随便下载！

多图上传

最新