HTML5 FileReader + Ajax 多图上传( WEBAPP适用 )
IT-Pony
2016-12-01 AM
463℃
0条
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax上传多图</title>
<style>
.more{
padding: 0;
margin: 0;
height: 300px;
}
.subm{
position: fixed;
bottom: 0;
margin: 0 auto;
width: 100%;
}
</style>
</head>
<body>
<!-- 多上传多图 -->
<div class="more">
<input type="file" name="File" class="File">
<input type="file" name="File" class="File">
<input type="file" name="File" class="File">
<div class="tmpImg"></div>
</div>
<!-- 单上传多图 -->
<div class="one">
<input type="file" name="File" class="FilesOne">
<div class="tmpImg_one"></div>
</div>
<div class="subm">提交</div>
</body>
<script>
window.onload=function()
{
//提交按钮
var oDiv = document.getElementsByClassName("subm")[0];
//多个上传框的集合
var oFileItem = document.getElementsByClassName('File');
//缩略图位置
var otmpImg = document.getElementsByClassName('tmpImg')[0];
//单上传点上传多图
var oFileone = document.getElementsByClassName('FilesOne')[0];
var otmpImgOne = document.getElementsByClassName('tmpImg_one')[0];
//图片所有的数据集合
var oFile = [];
//多上传框多图上传
for(var i = 0;i < oFileItem.length;i++)
{
oFileItem[i].onchange = function()
{
var reader = new FileReader();
//如果选中文件进行data:image/png;base64 转码
if(this.files.length > 0) reader.readAsDataURL(this.files[0]);
reader.onload = function()
{
//资源加载完成后进行结果数据填充
oFile.push(this.result);
otmpImg.innerHTML+='<img width="100" height="100" src="'+this.result+'">';
}
};
}
//单上传框上传多图
oFileone.onchange = function()
{
var reader = new FileReader();
//如果选中文件进行data:image/png;base64 转码
if(this.files.length > 0) reader.readAsDataURL(this.files[0]);
reader.onload = function()
{
//资源加载完成后进行结果数据填充
oFile.push(this.result);
otmpImgOne.innerHTML+='<img width="100" height="100" src="'+this.result+'">';
}
};
//提交事件
oDiv.onclick=function()
{
console.log(oFile);
};
};
</script>
</html>