JS：带图片的button实现多文件上传功能

<div>
    <button onclick="fileUps.click()"><img src="你的路径">
    </button>
    <input class="你的class" type="file" onchange="fileupload()" id="fileUps" style="display: none" multiple>
</div>
<!--                文件上传界面区域-->
<div id="project_file">
</div>
<script>
    function fileupload() {
        var content = "";//所要放置的多个文件界面代码
        var size = document.getElementById("fileUps").files.length;//获取文件的个数
        for (var i = 0; i < size; i++) {
            content += '<div class="psbox">' +
                '<div class="你的class">' +
                '<img src="你的文件缩放图片路径">' +
                '<div class="txtbox">' +
                '<h3>' + document.getElementById("fileUps").files[i].name + '</h3>' +
                '<h4>' + Math.ceil(document.getElementById("fileUps").files[i].size / 1024 / 1024) + 'M</h4>' + '</div></div><button><img src="你的文件缩放图片路径"></button>'
                + '</div>';
            // alert(content);
        }
        $("#project_file").html(content)
    }
</script>

　　原理：利用 style="display:none" 将系统原版的文件上传按钮给隐藏，用自己定义的button点击后去触发原来的文件上传

　　　实现效果如下: