利用bootstrap和js完成一个简易的文件上传按钮

今天需要找一个和页面比较搭的上传文件的样式，但是很可惜没有找到比较合适的，于是只能自己写一个简单的。
为了偷懒用了bootstrap自带的样式
代码如下：

<form action="#" method="post" enctype="multipart/form-data">                <input class="btn btn-xlarge btn-clean-one" id="pictureFile" type="file" onchange="setSpanCon()" name="pictureFile" style="opacity: 0">                <span class="btn btn-xlarge btn-clean-one" id="showFilename" onclick="setFilename()">选择文件</span>                <script type="text/javascript">                    function setFilename(){                        var pictureFile = document.getElementById("pictureFile");                        pictureFile.click();                    }                    function setSpanCon(){                        var pictureFile = document.getElementById("pictureFile");                        var FullFilename = pictureFile.value;                        var aFilename = FullFilename.split('\\');                        var filename = aFilename[aFilename.length-1];                        var spanFilename = document.getElementById("showFilename");                        spanFilename.innerHTML = filename;                    }                </script>                <input class="btn btn-xlarge btn-clean-one" type="submit" value="提交"/></form>

结果如下：