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 以普通视图将这些文件名附加到页面的其他位置。