title: Google app engine, Ajax, file upload,
body: <p>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:</p>
  
  <ol>
  <li>In "form.html", how do I prepare the "data" argument for the postFormData() function so that I can pass all the fields and files.</li>
  <li>How to design the callback function, so that the response (i.e., "form.html") may update the content div?</li>
  </ol>
  
  <p>Thanks for your help.</p>
  
  <p>base.html:</p>
  
  <pre><code>...
  &lt;div id="content"&gt;
  {% include "form.html" %}
  &lt;/div&gt;
  
  Image:&lt;br /&gt;
  &lt;img src="/file?entity_id={{entity.key}}" /&gt;
  &lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
    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 &amp;&amp; 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);
  }
  &lt;/script&gt;
  ...
  </code></pre>
  
  <p>form.html</p>
  
  <pre><code>&lt;form action="/form" method="POST" enctype="multipart/form-data"&gt;
    name1: &lt;input type="text" name="name" /&gt;{{ name1 }}&lt;br /&gt;&lt;br /&gt;
    name2: &lt;input type="text" name="name" /&gt;{{ name }}&lt;br /&gt;&lt;br /&gt;
    ...
    file1: &lt;input type="file" name="file" /&gt;{{ file1 }}&lt;br /&gt;&lt;br /&gt;
    file2: &lt;input type="file" name="file" /&gt;{{ file2 }}&lt;br /&gt;&lt;br /&gt;
    ...
           &lt;input type="submit" value="Submit" onclick="return postFormData('/form', howToPrepareData?, whatIsTheCallbackFunction?)" /&gt;
  &lt;/form&gt;
  </code></pre>