如何使用 CSS 和 JavaScript 自訂 HTML5 檔案輸入？

使用 CSS3 和 Javascript 自訂「輸入檔案」元件

設定 的樣式使用 CSS3 和 JavaScript 的元件是可能的。或者，您可以建立一個樣式化的 div，點擊時會觸發文件瀏覽器。

CSS3 樣式

要設定輸入檔案元件的樣式，您可以使用 CSS3。例如，可以套用以下樣式：

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

這將隱藏預設的檔案輸入元件。

JavaScript/jQuery 實作

使用 JavaScript 或 jQuery，您可以增強 的功能。成分。例如，您可以建立一個在點擊時觸發檔案瀏覽器的div：

<div>
<pre class="brush:php;toolbar:false">#file {
    display: none;
}

var wrapper = $('<div>').css({height: 0, width: 0, 'overflow': 'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function() {
    $this = $(this);
    $('#file').text($this.val());
});

$('#file').click(function() {
    fileInput.click();
}).show();<p>此腳本隱藏原始輸入檔案元件並建立一個標記為「選擇檔案」的可單擊div。點選 div 時，會開啟檔案瀏覽器。 </p>
</div>