title: javascript send post parameters with file
body: <p>Trying to upload a file with some parameters, I've changed the <code>Ext upload plugin</code> to upload some files with post parameters.<br>
  The <code>ext uploader</code> code (ux.upload.uploader.FormDataUploader) :</p>
  
  <pre><code>uploadItem : function(item) {
       file = item.getFileApiObject();
  
      item.setUploading();
  
       formData = new FormData();
  
      // mycode goes here to append some parameters
      formData.append(file.name, file);
  
       xhr = this.initConnection();
  
      xhr.setRequestHeader(this.filenameHeader, file.name);
      xhr.setRequestHeader(this.sizeHeader, file.size);
      xhr.setRequestHeader(this.typeHeader, file.type);
  
      var loadendhandler = Ext.Function.bind(this.onLoadEnd, this, [
              item
          ], true);
  
      var progresshandler = Ext.Function.bind(this.onUploadProgress, this, [
              item
          ], true);
  
      xhr.addEventListener('loadend', loadendhandler, true);
      xhr.upload.addEventListener("progress", progresshandler, true);
  
      xhr.send(formData);
  },
  initConnection : function() {
      var xhr = new XMLHttpRequest(),
          method = this.method,
          url = this.url;
  
      xhr.open(method, url, true);
  
      this.abortXhr = function() {
          this.suspendEvents();
          xhr.abort();
          this.resumeEvents();
      };
  
      return xhr;
  },
  </code></pre>
  
  <p>I tried these two lines of my code:</p>
  
  <pre><code>formData.append("ali","ghasemi");
  formData.append("alisd","ghassdf");
  </code></pre>
  
  <p>But <strong>the parameters were added into the request payload</strong> in the following manner:</p>
  
  <pre><code>------WebKitFormBoundarylAKSY21NN15kqWct
  Content-Disposition: form-data; name="ali"
  
  ghasemi
  ------WebKitFormBoundarylAKSY21NN15kqWct
  Content-Disposition: form-data; name="alisd"
  
  ghassdf
  ------WebKitFormBoundarylAKSY21NN15kqWct
  Content-Disposition: form-data; name="icon-info.gif"; filename="icon-info.gif"
  Content-Type: image/gif
  
  GIF89a 
  </code></pre>
  
  <p>How can I get the <code>post</code> parameters at server side or how set these parameters correctly at the client side?<br>
  I am coding in java spring. <code>HttpServletRequest</code> does not know these params.   </p>
  
  <pre><code>public JSONObject upload(HttpServletRequest request, HttpServletResponse response, @RequestBody String body) throws IOException {
      String ali = request.getParameter("ali"); // returns null
  } 
  </code></pre>
  
  <p>Any answer in Ext or pure javascript or <code>Java spring controller</code> will be appreciated.<br>
  Here's a related question: <a href="https://stackoverflow.com/questions/7752188/formdata-appendkey-value-is-not-working">formdata-appendkey-value-is-not-working</a></p>