通过回调函数实现多张图片上传（base64）

js:

//监听图片上传并保存base64
	$(function() {

		$("#file1")
				.bind(
						'input propertychange',
						function() { //监听输入内容改变
							for (var a = 0; a < document
									.getElementById("file1").files.length; a++) {
								uploadFile(document.getElementById("file1").files[a])
										.then(//图片解析成功之后的回调
												function(result) {

													$("#headPhone")
															.append(
																	"<img width='60%' src='"
																			+ result
																			+ "' style='display: block' id='imgWait"
																			+ a
																			+ "' />");

												});
								//var file = document.getElementById("file1").files[a];   //file.type  获取图片类型
							}

						});

	})
	function uploadFile(file) {
		return new Promise(function(resolve, reject) {
			var reader = new FileReader();
			var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
			var imgUrlBase64;
			if (file) {
				//将文件以Data URL形式读入页面  
				imgUrlBase64 = reader.readAsDataURL(file);
				reader.onload = function(e) {
					//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
					if (AllowImgFileSize != 0
							&& AllowImgFileSize < reader.result.length) {
						layer.msg('上传失败，请上传不大于2M的图片！');
						return;
					} else {
						resolve(reader.result) //this.result
					}
				}
			}

		})
	}
//保存图片
//提交数据
	function save() {

		var tempSrc = "";
		var imglist = $("#headPhone img");
		for (var i = 0; i < imglist.length; i++) {
			tempSrc += imglist[i].src + "|";
		}
	}

html：

<div id="headPhone" style="float: left">
					<span class="upPhone"><b class='text'>+</b><input
						type="file" id="file1" multiple accept="image/*" value="点击更换头像"
						style="opacity: 0;" /></span>
				</div></li>

以上就可以实现图片多张上传