始终使用`enctype="multipart/form-data"`还是从不使用？

Question

我想写一个通用的html模板。

我知道过去如果想要上传文件，你需要在<form>标记中设置enctype="multipart/form-data"。

我希望在我的通用模板中避免这种情况。

我该怎么做？我看到了以下解决方案：

• 始终使用enctype="multipart/form-data"。
• 从不使用enctype="multipart/form-data"。

背景：我很幸运，我不需要支持旧版浏览器。我不需要支持IE9或更早版本。

它正常工作

我们在所有表单中都使用enctype="multipart/form-data"（即使没有文件要上传）。

它有效。这使得我们的模板更简单。对我来说，这是实现"无条件代码"的一小步。

- guettli

---

始终使用它没有任何危害。 - Mr. Alien

@Mr.Alien 总是使用它没有伤害。很好。现代 Web 浏览器还需要它吗？ - guettli

我认为是的...很久以前就没有处理表单上传了，但是明确提到multipart/form-data意味着你有一个文件上传字段。可以将其视为网站提供表单上传作为可选项，即使未提供文件..属性仍然存在。因此，在所有表单中定义它不会有任何损害。 - Mr. Alien

Answer 1

在表单中上传文件时，您应该指定编码为“multipart/form-data”。

如果您想使您的表单通用，请在表单中省略此属性，并直接使用输入或按钮元素的formenctype属性进行覆盖（仅适用于支持HTML5的浏览器）。 在您的情况下，请更改：

<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

至：

<form action="upload.php" method="post">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload" formenctype="multipart/form-data">
  <input type="submit" value="Upload Image" name="submit">
</form>

此外，您可以查看这个问题，其中建议避免enctype="multipart/form-data"的常用使用。

- Gabriel Molina

---

这是一种回答他问题的方式，可以 永远不使用 enctype="multipart/form-data" 在表单中。 - Gabriel Molina

@Mr.Alien，你认为我已经知道这个了吗？我知道一点，但不是很多。对我来说，你可以针对每个输入元素设置表单编码类型是新的。 - guettli

嗯，@guettli，它是HTML5标准。 - Sagar V

这个答案实际上是错误的。input元素上的formenctype属性只能与type="submit"和type="image"一起使用，否则它将不起作用。 - Jim Westergren

Answer 2

我不能直接进行评论，所以必须将其写成答案。

据我所知，唯一的区别在于后端如果使用PHP（不知道这是否会影响Java/Python或其他用于后端的语言除了PHP）。

如果PHP从$_POST 和$_FILES超级全局变量中获取数据，那么就没有问题，您始终可以使用它，但是如果您正在使用：

$post_content = file_get_contents('php://input')。

据我记得，$post_content内的内容会变为空白，或者类似的东西（它可能对单个文件有效，但对于多个文件，我记得不正确...）。

- Antoniu Livadariu

---

据我所知，这个问题与编程语言无关。它是关于现代HTML的。 - guettli

Answer 3

我认为您应该始终选择使用enctype="multipart/form-data"，因为它能够发送任何数据类型。但是，如果您不需要与旧浏览器进行向后兼容，则可以选择HTML5，这样不仅可以实现此功能，还可以实现其他功能。

您可以在此链接HTML5 Attributes中查看可用的HTML5属性。

支持的浏览器列表（版本和示例）可在此处找到：Example and supported browsers.

我建议您添加一个过滤器/拦截器，它将从请求中获取所有参数并将其放入某个数据结构或通用函数中，以帮助他们从请求中提取值，这将有助于后端开发人员从请求中获取数据。

<form>
     <input type=submit value=Submit formenctype="application/x-www-form-urlencoded">
 </form>

你也可以编写一个 JavaScript 函数，在每次表单提交时调用该函数，并根据属性或某些指定的格式将请求提交到服务器，即使客户端浏览器较旧也可以正常工作。希望这有所帮助。

- Shivang Agarwal

---

你说：“我建议您添加一个过滤器/拦截器，它将获取请求中的所有参数并将其放入某个数据结构或通用函数中，帮助他们从请求中提取值......”我使用的是Web框架Django。我看不到任何区别（有或没有enctyp），除非我查看代码。该框架处理这两种交换数据的方式。 - guettli

@guettli 你是对的，但我写下这个不考虑技术/框架。在某些语言中，你需要明确处理相同情况，而在其他语言中或者在使用框架的情况下，框架会智能地处理它。但是即使在这种情况下，框架也是在做与我要求你明确做的相同的事情。 - Shivang Agarwal

Answer 4

你可以使用JavaScript来实现

var file = document.getElementById('file').files[0]; 
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = sendData;


function sendData(event) {
    var result = event.target.result;
    var fileName = document.getElementById('file').files[0].name; 
    $.post('/api/sendData', { data: result, name: fileName }, continueSubmission);
}

- Mohammed Athar Imran Ahmed

---

谢谢你的回答。我的高层目标是做更少的事情，而不是更多。但你说得对，执行这个JavaScript片段可以解决不确定性（如果有人仍然不确定）。 - guettli

Answer 5

在上传文件时，您始终需要在表单标签中使用enctype="multipart/form-data"。但是，如果您不上传任何文件，则不必这样做。

- Abhishek Jaiswal