第2步：CSS： 有点棘手了
 

JavaScript Code复制内容到剪贴板

1. .fileUpload {   

2.     position: relative;   

3.     overflow: hidden;   

4.     margin: 10px;   

5. }   

6.     

7. .fileUpload input.upload {  position: absolute;   

8.     top: 0;   

9.     right: 0;   

10.     margin: 0;   

11.     padding: 0;   

12.     font-size: 20px;   

13.     cursor: pointer;   

14.     opacity: 0;   

15.     filter: alpha(opacity=0);   

16. }   

为简单起见，我使用应用了BootstrapCSS样式的按钮  (div.file-upload)。

演示：

上传按钮，显示选中的文件

不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。

JavaScript： 
 

JavaScript Code复制内容到剪贴板

1. document.getElementById("uploadBtn").onchange = function () {   

2.     document.getElementById("uploadFile").value = this.value;   

3. };   

DOM:
 

JavaScript Code复制内容到剪贴板

1.   

2.   

3.     <span>Upload   

4.