图片上传效果

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

    }