使用 AJAX、Python 和 CGI 上传文件答案

【问题标题】：Uploading a file with AJAX, Python, and CGI使用 AJAX、Python 和 CGI 上传文件
【发布时间】：2015-02-15 22:37:17
【问题描述】：

我在使用 Python 和 AJAX 上传图像时遇到了一个非常奇怪的问题。如果我不使用 AJAX，它可以完美运行，但如果我不使用，我会得到：

ValueError：多部分形式的无效边界：b''

请注意，我想在没有 iFrame 的情况下执行此操作，根据 this post 和 this Mozilla post 是可能的。

AJAX（精简版）

var formData = new FormData()
formData.append("upload", form.upload.files[0]);

var xmlhttp=new XMLHttpRequest();

xmlhttp.open("POST","/cgi-bin/uploadPic.py", true);

xmlhttp.setRequestHeader("Content-type","multipart/form-data");

xmlhttp.send(formData);

HTML 输入框：

<input type="file" id="upload" name="upload" />

相对 Python：

import cgi
# This is where it fails
POST = cgi.FieldStorage()

我相信这应该足以重现，如果不是，请告诉我。

下面还有一些不同的标头，是我从 FF Live Headers 那里得到的。

工作： Content-Type：multipart/form-data；边界=----------------------------83059728161
不工作： 内容类型：multipart/form -数据

工作：内容长度：575804
不工作：内容长度：575810

工作： [无]
不工作： Pragma：无缓存

工作：缓存控制：max-age=0
不工作：缓存控制：无缓存

工作： Keep-Alive：timeout=5，max=100
不工作： Keep-Alive：timeout=5，max=98

工作： 传输编码：分块
不工作： [无]

其他一切似乎都一样。

【问题讨论】：

@Kermani，没有 iframe 真的没有办法吗？ This post 似乎表明你可以。
我打开页面时出错：“找不到对象”，链接无效
再试一次？当我点击链接时工作。
@Kermani, here is a link from Mozilla 陈述同样的事情。它应该与 FormData 对象一起使用。另外，如果您注意到的话，工作和非工作中的内容长度之间的差异是 6 个字节。

标签： python ajax python-3.x file-upload cgi

【解决方案1】：

所以，在阅读了Mozilla's page 上的一些文档后，我找到了解决方案。

您不想声明Content-type，只需将整个表单传递给FormData

在这几行之后：

formData.append("upload", form.upload.files[0]);
xmlhttp.setRequestHeader("Content-type","multipart/form-data");

剩下的就是这个：

// Note that form is now passed into FormData
var formData = new FormData(form)

var xmlhttp=new XMLHttpRequest();

xmlhttp.open("POST","/cgi-bin/uploadPic.py", true);

xmlhttp.send(formData);

适用于 Chrome、FF、IE10 和 IE11（FormData 是 IE10+）。我假设它可以在 Opera 和 Safari 中运行，因为它们都是基于 Gecko 的。

【讨论】：