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

时间:2014-09-15 08:14:05

标签: javascript jquery canvas asynchronous

我正在尝试将画布转换为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(“提交后”+新的Date()。getTime());)时,表单会在隐藏字段中没有图像的情况下发送。

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

这让我觉得表单提交存在一个问题,它会破坏它需要发送的一个DOM元素。

现在有没有人,如果它真的是异步的,如果不是这样,我怎样才能确保$(“#design).submit();仅在图像被复制到隐藏字段后被调用,或者可能没有破坏DOM元素。

非常感谢!

1 个答案:

答案 0 :(得分:2)

我修改了代码的某些部分,并使用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代码(仅用于演示)并删除onclick按钮的Save

<强>的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开发工具或使用Firebug扩展(选项卡名称为Net )在Firefox中检查相同内容。