功能：自定義上傳按鈕的樣式，初始樣式的透明度為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>

* {
        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;
     }
 

<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>