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

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

HTML代码：

<form action="" name="formx" method="post" enctype="multipart/form-data
    ">
        <span>选择文件</span>
        <input type="file" name="userfile" οnchange="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>