由于异步表单提交，结果不一致

Unconsistent results because of asynchronous form submit?

本文关键字：表单提交 结果 不一致 异步 于异步      更新时间：2023-09-26

我正试图将画布转换为Jpeg图像，并将其放入表单的隐藏字段中，然后提交表单。

  function createBlob() {
     var imageblob = canvas.toDataURL('image/jpeg', 0.5);
      document.getElementById("id_hidden_preview_field").value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.
      // Here we submit the form with the 
      $("#design").submit();
      alert("after submit");
}

这是表单的代码：

<div class="container">
<h2>Add a design</h2>
<form id="design" enctype="multipart/form-data" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP">
<input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden"></p>
<!--<input type='submit' value='Save' />-->
<button id="gif" onclick="createBlob()">Save</button>
    </form></div>

出于某种原因，当我不放警报（alert（"after-submit"+new Date（）.getTime（）；）时，发送表单时，隐藏字段中没有图像。

当我发出警报时，它会毫无问题地发送出去。

这让我认为表单提交存在问题，它破坏了它需要发送的一个DOM元素。

现在有人知道吗，如果它真的是异步的，如果不是异步的，我如何确保$（"#design）.submit（）；只有在图像被复制到隐藏字段后才被调用，或者可能不破坏DOM元素。

非常感谢！

我修改了代码的某些部分，并使用JavaScript的addEventListener函数将click事件侦听器添加到button，而不是HTML的onclick属性。

这是代码：

HTML

<canvas id="myCanvas"></canvas>
<div class="container">
<h2>Add a design</h2>
    <form id="design" enctype="multipart/form-data" method="post">
        <input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP" />
        <input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden" />
        <button id="gif">Save</button>
    </form>
</div>

如您所见，我添加了canvas标签（仅用于演示），并删除了Save按钮的onclick。

JavaScript

/* Some drawing on canvas */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
/* Get the needed elements from the DOM */
var form = document.getElementById('design'),
    saveButton = document.getElementById('gif'),
    hiddenField = document.getElementById('id_hidden_preview_field');
/* Add click listener on save button click */
saveButton.addEventListener('click', createBlob, false);
/* The click handler function */
function createBlob() {
    var imageblob = canvas.toDataURL('image/jpeg', 0.5);
    hiddenField.value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.
    // Here we submit the form with the 
    form.submit();
}

在这里，我添加了一些在canvas上绘制的代码，提取并缓存了elements，在保存按钮上添加了事件侦听器。createBlob与您的代码几乎相同。

您可以在这里的JSFiddle中查看实际示例。

当您点击Save按钮时，JSFiddle会给出一个错误，因为您无法在那里提交表单。

但是，如果您打开Chrome开发工具并转到"网络"选项卡，您可以看到request包含blob。您也可以在Firefox中使用Firefox开发工具或使用Firebug扩展（选项卡名称为Net）进行检查。

相关文章：