谷歌应用引擎,Ajax,文件上传,

Question

在谷歌App Engine上,我想使用javascript(或Ajax)POST一个表单,然后更新目标div.表单包含许多要传输的字段和文件.javascript函数是从"Javascript:The Definite Guide"一书中复制而来的.我有两个问题:

1. 在"form.html"中,如何为postFormData()函数准备"data"参数,以便我可以传递所有字段和文件.
2. 如何设计回调函数,以便响应(即"form.html")可以更新内容div？

谢谢你的帮助.

base.html文件:

...
<div id="content">
{% include "form.html" %}
</div>

Image:<br />
<img src="/file?entity_id={{entity.key}}" />
<br />

<script type="text/javascript">
  function postFormData(url, data, callback) {
    if (typeof FormData === "undefined")
      throw new Error("FormData is not implemented");
    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.onreadystatechange = function() {
      if (request.readystate === 4 && callback)
        callback(request);
    };
    var formdata = new FormData();
    for (var name in data) {
      if (!data.hasOwnProperty(name)) continue;
      var value = data[name];
      if (typeof value === "function") continue;
      formdata.append(name, value);
    }
    request.send(formdata);
}
</script>
...

form.html

<form action="/form" method="POST" enctype="multipart/form-data">
  name1: <input type="text" name="name" />{{ name1 }}<br /><br />
  name2: <input type="text" name="name" />{{ name }}<br /><br />
  ...
  file1: <input type="file" name="file" />{{ file1 }}<br /><br />
  file2: <input type="file" name="file" />{{ file2 }}<br /><br />
  ...
         <input type="submit" value="Submit" onclick="return postFormData('/form', howToPrepareData?, whatIsTheCallbackFunction?)" />
</form>

Answer 1

我想出了以下代码。但奇怪的是，它有时有效，有时则无效。当失败时，Firebug 中显示的错误消息是“ReferenceError: $ is not Defined”。有人可以告诉我问题是什么以及这是否是正确的解决方案？谢谢。

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function(returnData) {
        $('#content').html(returnData)
    }); 
});