自定义上传图片样式，同时实现多图片的上传和预览

<form action="" name="formx" method="post" enctype="multipart/form-data
    ">
        <span>选择文件</span>
        <input type="file" name="file" multiple="multiple" οnchange="setImagePreviews();" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
        <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;
    }
    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;
     }

function setImagePreviews() {
    var oInput = document.getElementsByTagName('input')[0];
    var oList = document.getElementById('list');
    oList.innerHTML = "";
    // 获取上传图片的个数
    var fileList = oInput.files;
    for (var i = 0; i < fileList.length; i++) { 
        if (oInput.files && oInput.files[i]) {
            createLi(window.URL.createObjectURL(oInput.files[i]));
            console.log(oInput.files[i].name);
        }    
     } 

    function createLi(ImgSrc) {
        var oLi = document.createElement('li');
        var oImg = document.createElement('img');
        oImg.src = ImgSrc;
        oLi.appendChild(oImg);
        oList.appendChild(oLi);
    }
 }