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

结果如下：