Question

这不起作用，我不明白为什么......

upload.html

@form(action = routes.MainController.upload, 'enctype -> "multipart/form-data") {

    <label for="some_value">Some Label</label>
    <input type="text" name="something"><br/>

    <label for="some_other_value">Some Other Label</label>
    <input type="text" name="something_else"><br/>

    <p>
        <input type="submit">
    </p>
}

<span/>
<script>
$( "form" ).submit(function( event ) {
   if (dataReady()) {
        $( "span" ).text( "Good to go..." ).show();
        var formData = $(this);
        var bodyData = getClientGeneratedBlob();
        formData.append("blob", bodyData);
    } else {
        $( "span" ).text( "Not ready!" ).show().fadeOut( 1000 );
        event.preventDefault();
    }
});
</script>

为什么请求中没有收到数据？如何正确地将blob附加到此表单？

Answer 1

这很有用，但考虑到我更喜欢在问题中修复上述代码，我不会将其标记为解决方案。这更像是一个黑客......

$( "form" ).submit(function( event ) {
  if (dataReady()) {
    $( "span" ).text( "Good to go..." ).show();
    var dataArray = $(this).serializeArray(), len = dataArray.length, dataObj = {};
    for (i = 0; i < len; ++i) {
      dataObj[dataArray[i].name] = dataArray[i].value;
    }
    sendFormToServer( dataObj["something"], dataObj["something_else"] );
    $( "span" ).text( "Successfully saved your awesome blob" ).show();
  } else {
    $( "span" ).text( "You must create something first!" ).show().fadeOut( 1000 );
  }
});

WHERE ...

function sendFormToServer( some_name, some_other_name ) {
  if (!currentBlob) {
    alert("Cannot send an empty blob!");
  }
  var url = "/some_path";
  var request = new XMLHttpRequest();      
  var xhr = new XMLHttpRequest();
  var fd = new FormData();

  fd.append('blah', currentBlob, 'blah');
  fd.append('something', some_name);
  fd.append('something_else', some_other_name);

  request.open("POST", url, true);
  request.send( fd );
}

Answer 2

您的原始代码无法正常工作，因为您正在操纵DOM，而不是答案代码中的FormData对象。

var formData = $(this);
...
formData.append("blob", bodyData);

在第一行中，您将获得对<form>标记的引用。然后，您在该HTML标记上调用append()。这通常用于向页面添加新的HTML元素。在您的情况下，"blob"可能只被视为文本节点，bodyData可能只是被忽略。您没有看到它，因为您的表单正在提交，但如果您致电event.preventDefault()，您会看到文字“＃blob＆＃34;”出现在您网页末尾的某处形式。

例如，如果您在提交之前向表单添加一些新的<input>元素并将一些数据添加到表单中，那么您正在执行的操作将起作用。我不认为这会在这种情况下起作用。由于您已经在使用它，因此您可能希望探索jQuery的.ajax方法。它与您的答案非常相似，但可能更适合跨浏览器使用。

“提交”点击后即时设置表单正文数据？

2 个答案: