這不需要JavaScript！以下是跨瀏覽器解決方案：

看這個例子！-在Chrome/FF/IE中工作-(IE10/9/8/7)

最好的方法是有一個帶有for屬性附加在隱秘文件輸入元素(標(biāo)簽是for屬性必須與文件元素的id為了讓這件事起作用)。

<label for="file-upload" class="custom-file-upload">
    Custom Upload</label><input id="file-upload" type="file"/>

作為另一種選擇，您還可以直接用標(biāo)簽包裝文件輸入元素：(例如)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload</label>

在造型方面，只要藏起來¹控件的輸入元素。屬性選擇器.

input[type="file"] {
    display: none;}

那么，您所需要做的就是對自定義進行樣式化。label元素。(例如).

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;}

¹-值得注意的是，如果您使用display: none，它不會在IE8或更低的地方工作。還要注意jQuery驗證這一事實。不驗證隱藏字段默認(rèn)情況下。如果其中任何一件事對您來說都是問題，下面有兩種不同的方法來隱藏輸入(1, 2在這種情況下起作用。