自定义上传图片按钮 实现图片的预览和切换

功能：自定义上传按钮的样式，初始样式的透明度为0，设置自己想要的样式，同时可以实现上传图片的预览。

HTML代码：

<form action="" name="formx" method="post" enctype="multipart/form-data    ">        <span>选择文件</span>        <input type="file" name="userfile" onchange="handleFiles(this.files,this.nextElementSibling)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">        <div><p></p></div>        <ul id="list">        </ul>    </form>



CSS代码：
* {        margin: 0;        padding: 0;        list-style: none;    }    body {        position: relative;    }    span {        display: inline-block;        width : 90px;        height: 35px;        line-height: 35px;        border: 1px solid #ccc;        border-radius: 5px;        text-align: center;    }    input[type="file"] {        width: 100px;        height: 40px;        position: absolute;        top: 0;         left: 0;        z-index: 100;        opacity: 0;    }    div {         width: 200px;        height: 100px;        display: none;        margin: 15px;        position: relative;     }     div img {         width: 100%;         height: 100%;     }     div p {         width: 200px;         position: absolute;         right: -230px;         bottom: 0;         line-height: 35px;     }     ul {        width: 600px;        height: 350px;     }     ul li {        width: 170px;        height: 100px;        float: left;        margin-right: 5px;        margin-bottom: 5px;     }     ul li img {        width:100%;        height:100%;        display: inline-block;        margin: 0 auto;     }
JavaScript代码：
<script>    //获取div    var oDiv = document.getElementsByTagName('div')[0];    var oP = document.getElementsByTagName('p')[0];    // 创建li的个数    var arrImg = ["img/timg (1).jpg","img/timg (2).jpg","img/timg (3).jpg","img/timg (4).jpg","img/timg.jpg"];    var oList = document.getElementById('list');    // 循环arrImg，渲染li    for(var i=0;i<arrImg.length;i++) {        createListImg(arrImg[i]);    }    // 获取oList中的img    var aImg = oList.getElementsByTagName('img');    for(var i=0;i<aImg.length;i++) {         aImg[i].index = i;        aImg[i].onclick = function() {            oP.style.display = "none";            oDiv.style.display = 'block';            if(oDiv.innerHTML.indexOf('img') > 0) {                var oPic = oDiv.getElementsByTagName('img')[0];                oDiv.removeChild(oPic);                createDivImg(arrImg[this.index]);            }else {                 createDivImg(arrImg[this.index]);            }        }    }    console.log(aImg);    // 创建oDiv中的img标签    function createDivImg(ImgSrc) {        var oImg = document.createElement('img');        oImg.src = ImgSrc;        oDiv.appendChild(oImg);    }    // 创建oList中的img标签    function createListImg(ImgSrc) {        var oLi = document.createElement('li');        var oImg = document.createElement('img');        oImg.src = ImgSrc;        oLi.appendChild(oImg);        oList.appendChild(oLi);    }    // 上传图片发生改变    function handleFiles(file,obj) {        var oImgSize = document.formx.userfile.files[0].size;        //获取当前点击的元素的所有同级元素的html内容        var con = obj.innerHTML;        //判断当前点击元素内是否已经存在img图片元素，如果有则先全部清除后再添加，如果没有就直接添加        if (con.indexOf("img") > 0) {            //获取obj中的img            var pic = obj.getElementsByTagName("img")[0];            //移除该图片            obj.removeChild(pic);            //调用添加img图片的函数            creatImg();            //div显示            oDiv.style.display = "block";            oP.style.display = "block";            ImgSize();        } else {            creatImg();            oDiv.style.display = "block";            oP.style.display = "block";            ImgSize();        }        function creatImg() {            //创建一个img元素            var img = document.createElement("img");            //设置img元素的源文件路径，window.URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里            img.src = window.URL.createObjectURL(file[0]);            //window.URL.revokeObjectURL() 释放一个通过URL.createObjectURL()创建的对象URL，在图片被显示出来后，我们就不再需要再次使用这个URL了，因此必须要在加载后释放它            img.onload = function() {                window.URL.revokeObjectURL(this.src);            }            //在当前点击的input元素的div中添加刚刚创建的img图片元素            obj.appendChild(img);        }        function ImgSize() {           if(oImgSize < 1024*1024) {                oP.style.color = '#000';                oP.innerHTML = Math.floor(oImgSize/1000) +"KB,可以上传";            }else {                oP.style.color = 'red';                oP.innerHTML = "图片大于1M，不可上传";            }         }    }</script>