Javascript 谷歌应用引擎，Ajax，文件上传，

在googleappengine上，我想使用javascript（或Ajax）发布表单，然后更新目标div。表单包含许多要传输的字段和文件。javascript函数是从“javascript:thedefiniteguide”一书中复制的。我有两个问题：

在“form.html”中，如何为postFormData（）函数准备“data”参数，以便传递所有字段和文件

如何设计回调函数，以便响应（即“form.html”）可以更新content 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>
...

。。。
{%include“form.html”%}
图像：



函数postFormData（url、数据、回调）{
if（typeof FormData==“未定义”）
抛出新错误（“未实现FormData”）；
var request=new XMLHttpRequest（）；
打开（“POST”，url）；
request.onreadystatechange=函数（）{
if（request.readystate==4&&callback）
回调（请求）；
};
var formdata=new formdata（）；
for（数据中的变量名称）{
如果（！data.hasOwnProperty（name））继续；
var值=数据[名称]；
如果（值的类型==“函数”）继续；
formdata.append（名称、值）；
}
请求。发送（formdata）；
}
...

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>

名称1:{{name1}


名称2:{{name}}


...
文件1:{{file1}}


文件2:{{file2}}


...

我想出了以下代码。但是，奇怪的是，它有时有效，有时无效。失败时，Firebug中显示的错误消息是“ReferenceError:$未定义”。谁能告诉我问题是什么，这是不是一个正确的解决方案？谢谢

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

当您执行表单发布（用户单击submit按钮或通过JS调用）时，浏览器将重新加载窗口并显示发布结果。这显然不是你想要的

---

解决方法是有一个隐藏的

，它是表单POST操作的目标。下面是一个例子：

现在简单的图片上传到这里：

HTML

<form action="/form/index.php?name=" class="imageform" method="POST" enctype="multipart/form-data">
 name: <input type="text" name="name" class="name" /><br /><br />
 file: <input type="file" name="file" class="file"/><br /><br />
        <input type="submit" value="Submit" class="submit" />
</form>
<div id="callback">
</div>

在head中还包括此链接：

<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>

---

嘿，伙计，php文件中的所有回显文本都将显示在#callback中。所以，如果您想预览图像，请在那里回显html，不要删除action=/form/index.php？name=和php文件类型$name=$\u GET['name']

嘿，伙计，不要使用长代码而不是javascript，使用jquery，它非常快，而且您必须编写更少的代码@有抱负的：相信我，我试过了。我知道如何使用jQuery的Ajax更新div；我知道如何使用jQuery发布包含“常规数据”的表单。但我只是不知道如何发布包含常规数据和文件/图像的表单，然后使用jQuery更新目标div。这就是我选择javascript的原因。也许你能解释一下？谢谢。嘿，你想从我这里得到完整的密码吗？我会做的，但只是简单地解释一下您想要什么？因为JQUERY非常简单，回调也非常容易，只需在ajax请求中键入success并定义一个简单的函数来追加、更改或更新元素！我想出了以下代码。但是，奇怪的是，它有时有效，有时无效。有人能告诉我这是一个正确的解决方案吗？谢谢$ready（function（）{//bind'myForm'并提供一个简单的回调函数$（'#myForm'）.ajaxForm（function（returnData）{$（'#content'）.html（returnData）}）；

<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>