5

在 google App Engine 上，我想使用 javascript（或 Ajax）发布表单，然后更新目标 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>
...

表单.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>
4

3 回答 3

1

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

解决方法是隐藏<iframe>一个作为表单 POST 操作目标的隐藏项。这是示例：如何通过 ajax (no jquery) 发送 multipart/form-data 表单内容？

于 2012-12-13T15:45:32.130 回答
1

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

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>

查询

$(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>

hey man all the text which will echo in php file will be shown in #callback. So, if you want to preview image please echo there html and do not remove that action=/form/index.php?name= and also in php file type $name=$_GET['name'];

于 2012-12-13T15:58:53.273 回答
0

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

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function(returnData) {
        $('#content').html(returnData)
    }); 
});
于 2012-12-13T15:05:46.990 回答