如何预填文件输入？

Question

我正在开发一个职位发布网站，将用户申请提交到第三方网站。用户在申请时必须提供以下信息：姓名、联系方式和简历。由于这些字段也可以在用户的个人资料中找到，我们希望预先填充表单字段，让用户随意更改信息。

现在，除了文件输入字段以外，所有其他字段都可以填充。然而，由于安全性问题，文件输入字段无法填充。是否有可能使用FILE API和BLOB对象进行解决？

我计划执行以下操作：

1. 从服务器上的文件URL创建blob对象
2. 使用FileReader将blob读取为数组缓冲区。
3. 将此文件附加到文件输入字段<-这就是我无法解决并需要帮助的地方。

此外，如果有任何其他实现此目标的方法，请告诉我。我正在使用PHP和JavaScript生成表单，因此可以在PHP中进行预处理。

- Gaurav

---

针对这个问题，由于文件输入字段的只读属性，上述方法无法工作，我改用了以下解决方案：

1. 通过Ajax将数据提交给本地PHP处理器
2. 检查附件，并在缺少附件时填写默认文件
3. 通过CURL POST将表单提交到第三方
4. 将响应返回给原始的Ajax调用。

- Gaurav

Answer 1

3. 将此文件附加到文件输入字段中 <- 这是我无法解决并需要帮助的部分。

不可能在 <input type="file"> 元素的 FileList 对象上设置值。

您可以创建并将 File 对象附加到 FormData 对象中，并使用 XMLHttpRequest() 提交 FormData

var data = new FormData();
data.append("file", /* Blob | File */, "filename.ext")

- guest271314

---

感谢您的快速回复。我需要提交表单到第三方页面，但似乎该页面不支持Ajax提交（原因不明）。不过普通的HTML表单提交是可以的。我也在考虑将表单提交到本地PHP，然后使用Curl将内容POST到第三方页面。 - Gaurav

你也可以将文件设置为data URL值，放在一个<input type="text">元素中。 - guest271314

请问你能否详细说明一下？如果第三方表单需要文件，那么这个能作为文件字段的补充吗？ - Gaurav

服务器需要在<input type="text">元素中期望一个data URI，而不是在<input type="file">元素中期望一个File对象。 - guest271314

希望那是可能的。如果是这样，我就可以简单地发送服务器上的文件URL了。 - Gaurav

@GauravAgrawal <input type="file"> 元素的 .files 属性是只读的 FileList。 - guest271314

Answer 2

创建一个答案，以便更深入地了解我如何解决这个问题以及为什么首先会有这个问题。

背景：我为客户创建了一个自定义的WordPress插件，该插件从各种网站获取工作申请，并将它们内联显示。我们还允许提交申请，用户可以附加他们的简历，同样提交到原始职位发布。由于很多用户在移动设备上访问网站，因此他们没有在同一设备上可用的简历。在这种情况下，我们希望为他们提供使用存储在其个人资料中的简历的设施。

潜在解决方案：最简单的方法是通过ajax从用户的个人资料中获取文件内容，并在提交之前将其附加到表单中。但是，由于某种原因，这并没有起作用。

应用解决方案：有效的解决方案非常老派。我们没有直接提交申请，而是将其提交到一个中间页面，该页面从用户的个人资料中获取文件内容，修改表单数据并通过curl提交。这也节省了用户端的双重数据交换（文件下载和重新上传）。

- Gaurav