css部分
#file {
margin: auto;
width: 100px;
height: 100px;
border-radius: 25px;
outline: 30px solid blue;
outline-offset: -80px;
border: 5px solid red;
}
#file [type="file"] {
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
#wrap img{
width: 100px;
height: 100px;
}
HTML部分
<form action="10.php">
<div id="file"> <!--多选-->
<input type="file" multiple title="请选择文件" onchange="upLoadFile(this);">
</div>
<div id="wrap"></div>
</form>
js部分
function upLoadFile(a) {
for (var i=0; i<a.files.length;i++){
//构建一个文件预览对象
var file=new FileReader();
//加载完之后
file.onload=function (ev) {
//创建图片元素
var img=document.createElement('img');
//设置图片路径
img.src=ev.target.result;
var oWrap=document.getElementById('wrap');
//给oWrap中插入图片
oWrap.appendChild(img);
img.onclick=function () {
var con=confirm('是否删除');
if (con){
this.parentNode.removeChild(this)
}
}
};
//解析文件路径
file.readAsDataURL(a.files[i]);
}
}