The prototype chain of the function is used here to encapsulate each shared function and privileged method to access private data.
<html>
<head>
<meta http-equiv="Content-Type:text/html;charset=utf-8"/>
<title></title>
<script type="text/javascript" src="common.js"></script>
<style type="text/css">
#preview
{<!-- -->
display: flex;
flex-wrap: wrap;
width: 580px;
padding: 10px;
justify-content: start;
}
.icon-po
{<!-- -->
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
margin-right: 20px;
margin-top: 20px;
}
.icon-close
{<!-- -->
position: absolute;
right: 5%;
top: 5%;
width: 30px;
border-radius: 45%;
background-color: #fff;
color: #000;
font-size: 16px;
line-height: 1.87em;
display: flex;
align-items: center;
justify-content: center;
}
.pic
{<!-- -->
width:150px;
height: 150px;
}
</style>
</head>
<body>
<div id="container">
<input type="file" name="uploadimg" id="upimg" multiple/>
<input type="button" value="Preview" name="icon" id="prebut"/>
<input type="button" value="Upload" id="upxhr"/>
</div>
<div id="preview"></div>
<script type="text/javascript">
//Add the addMethods() method of the function prototype chain
Function.prototype.addMethods=function(name,fn)
{<!-- -->
this.prototype[name]=fn;
}
//Create upload function
var uploadImg=function(){<!-- -->
var fL=[];
var url=[];
var name=[];
var e=0;
//The following are privileged method functions to facilitate obtaining private data
this.getfL=function(){<!-- -->
return fL;
};
this.getUrl=function(){<!-- -->
return url;
};
this.getName=function(){<!-- -->
return name;
};
this.setfL=function(val){<!-- -->
fL.push(val)
};
this.setName=function(val)
{<!-- -->
name.push(val);
}
this.setUrl=function(val)
{<!-- -->
url.push(val);
}
this.getThis=function()
{<!-- -->
return this;
}
this.getEle=function(ele)
{<!-- -->
return document.getElementById(ele);
}
this.clearfL=function()
{<!-- -->
//When clearing the array, you should also clear the name array to avoid popping up the picture that has been added when re-adding the picture.
fL=[];
name=[];
url=[];
}
this.clearName=function()
{<!-- -->
name=[];
}
this.clearUrl=function(){<!-- -->
url=[];
};
};
//The following are prototype chain functions
uploadImg.addMethods('getfL',function(){<!-- -->
return this.getfL();
});
uploadImg.addMethods('getFiles',function(upfiles){<!-- -->
if(upfiles.length>0 & amp; & amp; upfiles.length<6)
{<!-- -->
for(var i=0,len=upfiles.length;i<len;i + + )
{<!-- -->
if(/image\/(jpe?g|png|gif)/.test(upfiles[i].type))
{<!-- -->
if(upfiles[i].size<1024*1000)
{<!-- -->
if(this.getfL().length==0)
{<!-- -->
this.setfL(upfiles[i]);
}else if(this.getfL().length>0)
{<!-- -->
for(var x=0,leng=this.getfL().length;x<leng;x + + )
{<!-- -->
this.setName(this.getfL()[x].name);
}
if(this.getName().indexOf(upfiles[i].name)==-1)
{<!-- -->
this.setfL(upfiles[i]);
this.setName(upfiles[i].name);
}else
{<!-- -->
alert('This picture has been added');
}
}
if(this.getfL().length>5)
{<!-- -->
this.clearfL();
alert('Upload up to 5 pictures, please reselect pictures');
}
}else
{<!-- -->
alert('Please upload pictures smaller than 1M');
}
}else
{<!-- -->
alert('Please upload the correct image type');
}
}
}else
{<!-- -->
alert('Upload up to 5 pictures');
}
});
uploadImg.addMethods('preView',function(){<!-- -->
var e=0;
var that=this.getThis();
this.getfL().forEach(function(item,index,array){<!-- -->
//Create asynchronous reading file object
var reader=new FileReader();
//Create div1 as a small container for image preview, and div2 as a button to close the small container of div1
var div1=document.createElement('div');
var div2=document.createElement('div');
//Add style names to them
div1.className="icon-po";
div2.className="icon-close";
div2.innerHTML='X';
div1.index=div2.index=e;
e++;
reader.onload=function(){<!-- -->
var img=new Image();
img.src=reader.result;
img.title=item.name;
//Check whether the url connection of the image has been added in the preview
var pos=that.getUrl().indexOf(img.src);
if(pos==-1)
{<!-- -->
that.setUrl(img.src);
div1.appendChild(img);
div1.appendChild(div2);
that.getEle('preview').appendChild(div1);
}
else
{<!-- -->
return;
}
div2.onclick=function(event){<!-- -->
var ex=event.target;
div1.remove();
//When removing the image in div1, remove the related image data in the image object array, URL array, and image name array at the same time
that.getfL().splice(index,1);
that.getUrl().splice(index,1);
that.getName().splice(ex.index,1);
//index--;
//unique() deduplicates the array for its own array
var imname=unique(that.getName());
if(that.getfL().length != imname.length)
{<!-- -->
that.clearName();
that.getfL().forEach(function(item,index,array){<!-- -->
that.setName(item.name);
});
}
};
};
reader.readAsDataURL(item);
});
});
uploadImg.addMethods('xhrup',function(){<!-- -->
var xhr=new createXHR();
if(this.getfL().length>0)
{<!-- -->
var fd=new FormData();
var t=this.getThis();
for(var i in this.getfL())
{<!-- -->
fd.append(i,this.getfL()[i]);
xhr.open('post','ajaxvalidationimg.php',true);
xhr.send(fd);
}
xhr.onload=function(){<!-- -->
if(xhr.status==200)
{<!-- -->
var responseText=xhr.responseText;
if(!/[\[\S*]]/.test(responseText))
{<!-- -->
alert(responseText);
}else
{<!-- -->
var textarr=responseText.split('\t\
');
textarr.pop();
for(var x=0,l=textarr.length;x<l;x + + )
{<!-- -->
var m=JSON.parse(textarr[x]);
}
}
alert(m.msg);
console.log(m.data);
}
else
{<!-- -->
alert('xhr failed to obtain data');
}
};
t.clearfL();
}else
{<!-- -->
alert('No pictures to upload');
}
});
var upload=new uploadImg();
var file=document.getElementById("upimg");
file.onchange=function(){<!-- -->
upload.getFiles(file.files);
upload.preView();
console.info(upload.getfL());
};
upload.getEle('prebut').onclick=function(){<!-- -->
var preview=upload.getEle('preview');
var d=document.defaultView.getComputedStyle(preview,null);
if(d.display!="none")
{<!-- -->
preview.style.display='none';
}else
{<!-- -->
preview.style.display="flex";
}
if(preview.children.length==0)
{<!-- -->
upload.clearfL();
alert('No picture to preview');
}
};
upload.getEle('upxhr').onclick=function(){<!-- -->
upload.xhrup();
upload.getEle('preview').innerHTML='';
};
</script>
</body>
</html>