9 個自定義開源文件上傳字段片段

已發表: 2021-02-15

您可以找到用於改進 Web 表單的驚人工具，從 UI 工具包到高級 jQuery 插件。

但最難編輯的輸入字段之一是上傳字段。這是一個默認的 HTML 輸入元素，它允許用戶從他們的計算機上傳文件。與其他表單元素相比，重新設置上傳字段的樣式是一個巨大的挑戰。

如果您希望自定義上傳輸入，這個圖庫會有所幫助。我從 CodePen 收集了 9 個手工上傳的字段，證明您可以重新設置字段的樣式以使其看起來像您想要的那樣。

1.平面文件上傳

開發人員 Wallace Erick 僅使用一點 CSS 和 JavaScript 創建了這個平面上傳字段。它藉鑑了平面設計的趨勢，通過專注於單一顏色來避免漸變——通常採用單色配色方案。

您可以將此文件上傳設計添加到任何頁面並使其看起來很棒。您所要做的就是更改配色方案並將其正確放置在您的表單中。

它的工作方式與您期望的一樣，並且在標準的 HTML 輸入元素上運行。因此，這也適用於較舊的瀏覽器，並且也可以在移動設備上使用。

這是一個在上傳字段中變得更加抽象的設計。開發人員 Aaron Vanston 將此文件上傳創建為我們在大型網站上看到的文件的副本。

想想 Dropbox、Google+ 和 Facebook 等大型科技網站。他們通常有一個拖放區域，其中有一個很大的“單擊此處”空間來啟動上傳窗口。這正是 Aaron 對這段代碼所做的。

它確實依賴於 jQuery 和大量的 JS/CSS 來工作。雖然它確實使用標準的 HTML 輸入字段，但它還使用自定義 JS 函數處理上傳過程。

如果你熟悉 JavaScript，這可以作為一個方便的模板來構建你自己的文件上傳 UI。

如果您進行任何形式的現代網頁設計，那麼您知道您必須做出響應。移動用戶可以通過這些相同的表單將文件上傳到網絡，因此使用響應式輸入字段是一個好主意。

看看這個設計，看看一個高質量的移動友好上傳字段的例子。這是非常基本的，只有一個帶有拖放支持的小方形上傳空間。

請注意，這不使用輸入元素 - 所以沒有辦法點擊上傳。我認為這是一個可用性噩夢，但這也只是一個用於測試的示例片段——所以它並不適合完美的可用性。

如果您確實將此片段帶入您的網站，建議您在拖放區域旁邊添加一個典型的上傳字段。

每日開發項目是提高技能的好方法。 Drew Vosburg 採用這種方法構建了一個在 CodePen 上免費託管的甜蜜上傳表單。

它使用處理拖放效果的 JavaScript 函數進行了大量定制。但這個輸入字段實際上是為支持觸摸和單擊以及拖放而構建的。

可點擊區域是一個帶有 CSS 樣式的 HTML 標籤。該標籤元素附加到隱藏在頁面之外的輸入字段。它就像一個可點擊的字段一樣工作。絕對是一個聰明的想法，它是完全語義啟動的。

這是我在 CodePen 上看到的最複雜但令人印象深刻的片段之一。它使您可以直接從計算機將照片上傳到畫廊。對於您上傳的每張照片，它都會在頁面上顯示預覽。

它的工作原理是通過 JavaScript 提取圖像，然後將它們轉換為 base64 以嵌入到 CSS 中。

每當您將圖像上傳到服務器時，它們都會生成一個臨時文件。在你自己的服務器上，你可以使用這個臨時文件來顯示圖片。但是現在 CSS 支持 base64，這是另一種選擇。

界面超級乾淨，上傳功能融入其中。

如果您正在尋找無 JS 的上傳字段，請查看由 Stephen Baker 創建的這個示例。

它使用純 CSS3 將輸入樣式更改為一個大按鈕。它與 Font Awesome 上傳圖標一起使用，並簡單地將整個圓形區域包裹在上傳字段周圍。

您可以更改樣式、顏色、圖標或其他任何內容，以使其與您的網站相匹配。它基本上是默認輸入樣式的超級乾淨的替代品，它運行在純 CSS3 上。

開發人員 Terry Young 使用了一些 jQuery 並用它來增強一些現有的上傳字段。這就是結果（如果我可以這麼說的話，這是一個結果）。

通過這些樣式，您可以更改上傳字段的文本、大小、按鈕顏色或刪除文本字段以僅使用單個按鈕。

請注意，這確實需要大量的 jQuery，因為這些功能中的大多數都無法使用 CSS 進行更改。如果您不介意使用 jQuery，這些選項非常棒。

這是 Geoffrey Crofte 創建的一個稍微不同的平面上傳字段。這個也依賴於一些 JavaScript，但使用 CSS3 屬性設置整個輸入的樣式。

由於這是一個示例片段，因此您實際上無法在任何地方上傳文件。但是，如果您將其移至您自己的網站，這很容易改變。核心設計和設置確實賦予了這個片段一些生命。

return 函數在 JavaScript 中運行，因此您可以在其中處理文件上傳、屏幕更改或其他任何事情。

最重要的是，這些代碼可以在可追溯到 IE 8 的瀏覽器中運行！因此，如果您擔心可訪問性，這是一個非常可靠的選擇。

這是一個最終的自定義字段：它在美學上看起來非常簡單 - 但真正的獎品在於功能。

此上傳字段旨在一次支持多個文件。您通常不會在輸入字段中看到這一點 - 或者至少默認情況下不會。用戶必須在同一個窗口中選擇多個文件，後端需要支持。

使用此代碼段，您可以在一個上傳字段中列出所有文件名。您甚至可以使用 JavaScript 以普通視圖將這些文件名附加到頁面的其他位置。