Javascript 提交带有blob的表单

我一直在为这部电影的标题苦苦挣扎

我确信在真实的问题案例中有更好的方法来解决这个问题，但在抽象的案例中，这个问题似乎对我有一些意义

现有文件提交表单可将jpeg上传到服务器。当响应从服务器返回时，页面将重新加载，来自服务器的新页面包含有关上载图像的信息

我想在上传之前在浏览器中操作图像

因此，我没有提交表单，而是从表单中构建一个对象，用画布中的blob替换文件输入元素，并提交一个XMLHttpRequest

服务器对此感到满意，并返回新页面。因此，我在responseText中有了新页面，但我不能像实际表单submit那样将其加载到浏览器中

如何让浏览器在提交案例中返回表单响应后的行为方式

我想出了一个能表达这种情况的例子。如果不选中该复选框，它将提交文件。如果您检查它，它将使用XMLHttpRequest

将文档url设置为blob url会起作用，但会使文档url与提交时的url不同

---

document.write失败并出现错误。

如果将服务器的HTML响应粘贴到AJAX响应中，则可以将其直接粘贴到DOM中

这可能会变得有点棘手，这取决于您是如何得到响应的，如果您使用某种类型的视图布局，等等

但是，基本上，您在响应中得到的是HTML代码，您需要将其发布到浏览器中以便加载

您可以只编写document.write，但如果您使用的是布局，您可能有一个容器div，其中应该加载内容，那么您可以执行以下操作：

referenceToYourContainerObject.innerHTML = yourAJAXResponse;

---

只需将Ajax响应设置为window.location=“”，从而允许表单正常移动到下一页。您可能能够找出如何从ajax响应中替换所有页面html，但随后它将在地址栏中以原始URL呈现，这可能不是您想要的。

什么是

数据表单

？难道你不应该用一些代码在浏览器中打开图像，修改它，然后提交表单吗？哎呀，我指的是表单数据（）。你的意思是将图像保存回光盘并再次加载吗？@Julian，你只是想导航到服务器的响应吗？如果是，请将

xhr.responseType

设置为

'blob'

，然后将

窗口打开（URL.createObjectURL（this.response））

即可。谢谢@kaido。这是正确的方向，但它试图打开一个新的弹出窗口。我需要将其转到主窗口。My bad，要使其保持在同一帧中，请使用

window.location=URL.createObjectURL（this.response）但按下submit按钮时不会发生这种情况。在这种情况下，返回的HTML将替换整个文档。这是我需要与普通表单提交和表单提交相同的行为，表单提交时文件被blob替换。当您提交表单时，服务器将处理数据并返回HTML，AJAX调用也会发生同样的情况，传递blob或图像文件的事实不应影响从服务器收到的结果，这就是HTML。如果您使用AJAX调用，则需要将其发布到DOM。我同意，我无法完全按照表单/提交函数的方式来解决如何“将其发布到DOM”。这就是我的答案。这取决于您如何使用服务器代码。你在用php吗。网？MVC？您正在使用服务器布局吗？根据您的响应HTML包含的内容（整个页面或只是一个片段），您可以使用document.write和您的响应，或者通过.innerHTMLyou can't do document.innerHTML=xxx将其插入现有容器中。但是@kaido的建议可能是答案。