h5端多图片上传(base64)-前端

思路：循环图片转换base64，然后弄成一个数组传到后端即可

页面：

<h5>上传图片</h5>
<div id="imgt" style="float: left;position: relative;">
<div class="img_list"></div>
<input type="file" accept="image/*" multiple id="upload_img" onchange="upload_photo()"></div>

整点简单的样式排一下图片

.img_list img{
	width:70px;
	height:70px;
	border: 1px solid #99CCCC;
	margin:0 5px 5px 0;
}

orchard_imgs为base64图片数组

function upload_photo() {
	var file = document.getElementById("upload_img").files
	for (let i = 0; i < file.length; i++) {
		getBase64(file[i])
	}
}

function getBase64(file_img) {
	var reader = new FileReader();
	reader.readAsDataURL(file_img);
	reader.onloadend = function() {
		$(".img_list").append("<img src='" + reader.result + "' />")
		orchard_imgs.push(reader.result)
	}
}

然后补充一些增减图片的操作，就完善了，此篇省略