表格 document 上传

在您的表单中添加一个文件上传按钮,以从访问者那里收集 documents、图像、媒体文件等。

假设您的网站属于 商业、电子商务 Plus 或电子商务高级托管 计划,你可以整合一个 文件上传 按钮添加到您的表单中。这允许用户将文件附加到他们的表单条目中,您可以自动将文件转发到网站的数据管理器。此外,您可以自由自定义上传按钮的外观及其各种状态,以增强文件上传体验。

文件上传 按钮可以帮助您收集:

  • 简历、作品集和求职申请表等文件
  • 通过客户支持表格获取图片和影片,例如屏幕截图和截屏
  • 打包文件,例如,包含通过提交表单提交的参赛者的图像

本教程的范围包括:

  1. 如何将文件上传附加到表单
  2. 如何个性化文档上传配置
  3. 如何修改文档上传状态
  4. 如何监管文件入口

开学前

请参阅我们的表格基础课程,了解如何在 Webflow 中制作表格。 

如何将文件上传附加到表单

首先,确认您已包含 表单块 组件。随后,拖放 文件上传 按钮从 添加面板 (一)> 形式 部分直接 形式.

文件上传元素在添加面板的表单部分中突出显示。

如何个性化文档上传配置

将 document 上传输入集成到画布后,除了文本说明外,还会立即显示“上传文件”按钮。设置面板还将打开 文件上传默认 状态。

文件上传元素设置为文件上传按钮的默认状态。

在此位置,您可以在 4 状态 document 上传操作。下面,我们将解释如何调整和设计这些。

您还可以 标签文件上传 按钮。当您希望包含多个 文件上传 表单中的按钮(例如“简历”和“求职信”)。标签将有助于识别您条目数据中提交的文件。

您可以选择将 document 上传设为强制上传,类似于其他表单输入组件。 

您还可以选择 仅允许特定文件类别。 这使您可以限制用户可以通过特定表单中的按钮提交的文件类型。

仅允许特定文件类别

默认情况下,用户可以提交任何受支持的 category 文件。不过,您可以限制文件类别,并选择是否 文件上传 按钮将允许用户提交 文件, 图片 文件,甚至是您在 风俗 文本区域输入。

文件上传设置中的“仅允许特定文件类型”选项,其中选中“自定义”选项以仅允许 .pdf 上传。 

document 上传支持的文件类别

每个 document 上传按钮均接受最大 10MB 的单个文件,文件格式如下:

  • 文件 — .ai、.csv、.doc、.docx、.indd、.key、.numbers、.pps、.ppt、.pptx、.psd、.ods、.odt、.pages、.pdf、.txt、.xls、.xlsx、.odt、.ods、.odp
  • 图片 — .bmp、.dng、.eps、.gif、.jpg、.jpeg、.png、.ps、.raw、.svg、.tga、.tif、.tiff、.webp
  • 风俗 — 音频文件(.m4a、.mid、.mp3、.mpa、.ogg、.wav、.wma)、视频文件(.3gp、.avi、.flv、.m4v、.mov、.mp4、.mpg、.wmv)、.zip、.heic
提醒: 文件格式不区分大小写。

document 上传不支持的文件类别

出于安全目的,不允许以下文件类别:.apk、.app、.bat、.cgi、.com、.exe、.ps1、.gadget、.jar、.sh、.wsf、.tar、.tar.gz

有价值的信息: 您最多可以在每个表单中嵌入 20 个 document 上传按钮,并单独配置每个按钮。例如,您可以为“附加您的简历”按钮设置一个仅接受 PDF 的按钮,为“上传头像”按钮设置另一个仅接受图像的按钮。
示例申请表上的两个文件上传按钮。一个按钮标记为“上传简历”,另一个标记为“附上头像”。

如何自定义文档上传状态

您拥有对 document 上传旅程在其各个不同状态下的外观和氛围的完全控制权:

  • 默认 — 按钮的常规外观
  • 上传 — 上传过程中按钮的外观
  • 成功 — 文件上传后按钮的外观
  • 错误 — 出现问题时显示的消息
文件上传按钮的默认状态。按钮显示文本
文件上传按钮的当前状态为正在上传。它现在显示为
文件上传按钮已成功上传文件,并显示文件名以及

开始状态

起始状态包括:

  • 初始上传按钮包含一个图标和一个文本单元
  • 描述默认消息“最大文件大小 10MB”的消息文本单元
文件上传按钮的默认状态。按钮上写着“上传文件”,旁边的消息写着“最大文件大小 10MB”。

您可以自由地更改消息内容或将其完全删除。您还可以像设置文本单元的样式一样对其进行自定义。

改变按钮样式并赋予其独特的风格

您可以选择通过文本编辑、定制样式或调整图标来修改上传按钮。

要编辑文本,您可以直接双击按钮进行编辑。样式可以单独应用于文本,也可以将整个按钮作为一个整体应用。

个性化 按钮,实现一个类,并通过样式面板添加所需的样式属性。这包括背景颜色、边框或字体更改等调整。调整字体颜色 按钮 也延续默认图标的颜色。

如果您喜欢深色按钮,请将白色字体颜色与黑色背景搭配使用。这会同时转换图标和随附文本的字体颜色。

如果目的是为图标和文本保留不同的颜色或独立地设置样式,请为这些组件分配不同的类并相应地设置不同的字体颜色。

在这种情况下,字体颜色已直接应用于图标,它将覆盖按钮上的白色字体颜色。

要替换按钮上的现有图标,请删除默认图标,然后从您的 资源面板 通过拖放。

标有“上传简历”的按钮,现在以文件图标图像而不是标准的“上传”图标显示。

为了保留图标的标准尺寸和左对齐,请将图像的宽度或高度调整为 20 像素,并添加 8 像素的右边距,在图标和文本之间创建空间。

可以通过在按钮内拖动图标来重新定位,从而改变默认图标的位置。

文件上传按钮,
设计器的样式面板已选中“上传”图标。左边距已设置为 8 像素,右边距已设置为 0 像素。

要将图标放置在按钮文本的右侧,请将图标向右移动,并将边距调整为左侧 8 像素、右侧 0 像素。请注意,对于自定义图像,无需添加 0 像素的右边距。

上传状态

您可以自定义和设置上传状态下的上传按钮的样式,就像默认状态下一样。

文件上传按钮的上传状态。按钮上显示“正在上传…”,并显示一个小的进度条。

成功状态

文件上传的成功状态包括:

  • 文本块 — 显示已上传文件的名称,不可编辑。但是,您可以调整其外观。
  • 链接块内的图标——使用户能够 删除上传的文件 从其形式。您可以自定义此图标的样式及其悬停效果。

您可以在成功状态下设计整个按钮。

文件上传按钮的成功状态,显示上传文件的名称,旁边有一个“X”按钮用于删除上传的文件。

设计建议和推荐

您可以在成功状态按钮中插入图像,例如表示上传成功的图标或占位符文件缩略图图标。

文件上传按钮的成功状态,在“文件”图标旁边显示上传文件的名称。

您还可以在成功状态包装器中包含一个文本块,以显示“文件已上传!”或“成功!”等消息。

文件上传按钮的成功状态,显示已上传文件的名称。下面有一条消息,指出“成功!”

此外,您还可以将删除图标 (X) 替换为另一个图标图像或文本块 — 例如,显示“删除文件”的文本块。确保将链接块的宽度值设置为“自动”。

文件上传按钮的成功状态,显示上传文件的名称以及“删除文件”选项。

错误状态

Designer 中显示的默认错误消息为:“上传失败。文件的最大大小为 10MB。”但是,错误状态也可能由于文件大小超过 10MB 以外的原因而出现,例如网络问题、上传文件损坏或文件格式无效。每种错误情况都会显示一条独特的消息。了解如何个性化这些消息。

文件上传按钮下方显示的错误消息为:“上传失败。出现错误。请重试。”

警告: 错误信息上方的错误状态下显示的按钮与默认状态下的按钮相同。在此处更改按钮将替换默认状态下的原始按钮。

自定义错误信息

您可以选择更改所有 3 种错误类型的默认文本。您还可以通过选择 文本块错误状态 包装器。

要个性化错误消息,请选择画布上的错误文本块,然后访问 字段错误设置 在里面 设置面板。要编辑每条错误消息,请单击“铅笔”图标,当鼠标悬停在错误消息类型上时出现。

各种文件上传问题的错误消息配置:文件尺寸、文件格式不正确以及一般问题。突出显示的是“铅笔”图标,用于修改与文件尺寸错误相关的错误消息。

要重置每种错误类型的默认消息,只需修改错误消息,然后选择“恢复默认”。

用于个性化“文件尺寸”错误的错误消息的配置菜单。

处理文件提交

当访问者通过您的任何网络表单提交文件时,上传的文件将作为表单提交通知电子邮件中的网络链接显示,该通知电子邮件将发送到您 表单通知设置 包含在你的 站点设置.

如果你担任某个网站的管理员,你有权检查和分析每个网站提交的文件 站点设置 > 形式 > 表单提交数据.

请注意: 表单文件上传的存储空间上限为 10GB,超出此上限则每增加 1GB 每月需支付 $0.50 的费用。存储上限为 100GB,一旦达到上限,表单提交的收集将停止。此上限不可延长。您可以通过删除提交来释放存储容量。

重要的隐私和保护建议

默认情况下,只有 Webflow 注册用户才能检索通过表单上传的文件。这意味着,Webflow 上未注册的用户即使获得了文件链接也无法访问这些文件。要允许任何拥有相关链接的人访问文件,请在 站点设置 > 形式 标签 > 限制上传文件的访问.

在站点设置的“表单”部分中限制文件访问的选项。限制已禁用,无需登录。

笔记: 要使用 Zapier 或其他外部集成将表单文件提交到其他云存储服务,您还必须停用此功能。

下一步: 探索有效处理表单提交的方法。

麦宜云
Ewan Mak 的最新帖子 (查看全部)