<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 上传多张图片</title>
<style type="text/css">
.img-div{
float: left;
line-height: 1;
margin-left: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
//选择图片,马上预览
function xmTanUploadImg(obj) {
var fl=obj.files.length;
for(var i=0;i<fl;i++){
var file=obj.files[i];
// 判断图片
if(!/image\/\w+/.test(file.type)){
alert('请上传图片!');
return false;
}
var reader = new FileReader();
//读取文件过程方法
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';
var oimgbox=document.getElementById("imgboxid");
var ndiv=document.createElement("div");//创建div节点
//限制上传的图片数
var a=$('#imgboxid>div').length;
if(a<5){
ndiv.innerHTML=imgstr;
ndiv.className="img-div";
oimgbox.appendChild(ndiv);
}else{
alert('最多5张图片');
}
}
reader.readAsDataURL(file);
}
}
</script>
<input type="file" id="xdaTanFileImg" multiple="multiple" name="fileAttach" onchange="xmTanUploadImg(this)"/>
<!--图片显示位置-->
<div class="img-box" id="imgboxid">
</div>
</body>
FileReader多图片上传
最新推荐文章于 2021-05-25 21:31:55 发布