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]); } }