Google app engine, Ajax, file upload,

Question

On the google App Engine, I would like to use javascript (or Ajax) to POST a form and then update the target div. The form contains a lot of fields and files to transfer. The javascript function is copied from the "Javascript: The Definite Guide" book. I have 2 questions:

1. In "form.html", how do I prepare the "data" argument for the postFormData() function so that I can pass all the fields and files.
2. How to design the callback function, so that the response (i.e., "form.html") may update the content div?

Thanks for your help.

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

When you do a Form POST (user clicks submit button or called via JS) then browser will reload the window and display the result of the POST. This is obviously not what you want.

The workaround is to have a hidden <iframe> that is a target of the Form POST action. Here is the example: How to send multipart/form-data form content by ajax (no jquery)?

Answer 2

and now simple image upload here:

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();
}
});
});

also include this link in head:

<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'];