Question

在Google App Engine上，我想使用javascript（或Ajax）POST一个表单，然后更新目标div。表单包含许多要传输的字段和文件。 javascript函数是从“Javascript：The Definite Guide”一书中复制而来的。我有两个问题：

在“form.html”中，如何为postFormData（）函数准备“data”参数，以便我可以传递所有字段和文件。
如何设计回调函数，以便响应（即“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

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

解决方法是使隐藏的<iframe>成为Form POST操作的目标。以下是示例：How to send multipart/form-data form content by ajax (no jquery)?

Answer 2

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

<强> 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>

<强> JQUERY

$(document).ready(function() 
{ 
$('.submit').on('click', function() 
{
if($(".name").val()==""){
$(".name").val("Enter Name Here")
}
else { 
var s = $(".name").val();
var n = $(".imageform").attr("action");
$(".imageform").attr("action", function() {
return s+n;
}
$("#callback").html('Uploading.....');
$(".imageform").ajaxForm(
{
target: '#callback'
}).submit();
}
});
});

还包括此链接：

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

嘿，所有将在php文件中回显的文本将显示在#callback中。所以，如果你想要预览图像，请回显那里的html，不要删除那个动作= / form / index.php？name =和php文件类型$ name = $ _ GET ['name'];

Answer 3

我想出了以下代码。但是，奇怪的是，它有时会起作用，有时候却没有。当它失败时，Firebug中显示的错误消息是＆＃34; ReferenceError：$未定义＆＃34;。有人能告诉我问题是什么，以及这是否是正确的解决方案？感谢。

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

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

3 个答案: