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>
以上就可以实现图片多张上传