Alfresco-使用javascript将动态表单提交到upload.post

我在尝试为露天开发dashlet时遇到了一些问题。这是一个简单的拖放文件上传dashlet，使用HTML5的拖放和文件API。对于

drop

事件侦听器，我调用了以下函数，这似乎是所有问题的原因：

function handleFileSelect(evt) {
  var files = evt.target.files || evt.dataTransfer.files,
      tmpForm, tmpDest, tmpMeta, tmpType, tmpName, tmpData;

  dropZone.className = "can-drop";
  evt.stopPropagation();
  evt.preventDefault();

  for (var i=0,f;f=files[i];i++) {

    tmpForm = document.createElement('form');
    tmpDest = document.createElement('input');
    tmpDest.setAttribute('type', 'text');
    tmpDest.setAttribute('name', 'destination');
    tmpDest.setAttribute('value', destination);
    tmpForm.appendChild(tmpDest);
    tmpMeta = document.createElement('input');
    tmpMeta.setAttribute('type', 'text');
    tmpMeta.setAttribute('name', 'mandatoryMetadata');
    tmpMeta.setAttribute('value', window.metadataButton.value);
    tmpForm.appendChild(tmpMeta);
    tmpType = document.createElement('input');
    tmpType.setAttribute('type', 'text');
    tmpType.setAttribute('name', 'contenttype');
    tmpType.setAttribute('value', "my:document");
    tmpForm.appendChild(tmpType);
    tmpName = document.createElement('input');
    tmpName.setAttribute('type', 'text');
    tmpName.setAttribute('name', 'filename');
    tmpName.setAttribute('value', f.name);
    tmpForm.appendChild(tmpName);
    tmpData = document.createElement('input');
    tmpData.setAttribute('type', 'file');
    tmpData.setAttribute('name', 'filedata');
    tmpData.setAttribute('value', f);
    tmpForm.appendChild(tmpData);

    Alfresco.util.Ajax.request({
      url: Alfresco.constants.PROXY_URI_RELATIVE + "api/upload",
      method: 'POST',
      dataForm: tmpForm,
      successCallback: {
        fn: function(response) {
          console.log("SUCCESS!!");
          console.dir(response);
        },
        scope: this
      },
      failureCallback: {
        fn: function(response) {
          console.log("FAILED!!");
          console.dir(response);
        },
        scope: this
      }
    });
  }
}

服务器以500作为响应，如果我打开web脚本的调试级别日志记录，upload.post将返回：

DEBUG [repo.jscript.ScriptLogger] ReferenceError: "formdata" is not defined.

---

至少对我来说，这表明上面的表单没有正确提交（如果有的话）。当我使用Chrome开发工具深入研究这一切时，我注意到请求负载与REST客户机之类的东西截然不同。上述代码导致请求使用

内容类型：application/x-www-form-urlencoded

，而使用REST客户端或Alfresco Share的标准上载程序使用

内容类型：多部分/表单数据

。如果我需要使用

multipart/form data

提交表单，那么写出请求主体（包括边界、内容配置等）以包含上传的文件的最简单方法是什么？

我放弃了通过javascript创建表单HTML元素的想法，并假设如果浏览器支持文件API，还有拖放API，它们可能还支持XMLHttpRequest2API。根据，上述代码现在为：

function handleFileSelect(evt) {
  var files = evt.target.files || evt.dataTransfer.files,
      xhr = new XMLHttpRequest();

  dropZone.className = "can-drop";
  evt.stopPropagation();
  evt.preventDefault();

  for (var i=0,f;f=files[i];i++) {
    formData = new FormData();
    formData.append('destination', destination);
    formData.append('mandatoryMetadata', window.metadataButton.value);
    formData.append('contenttype', "my:document");
    formData.append('filename', f.name);
    formData.append('filedata', f);
    formData.append('overwrite', false);

    xhr.open("POST", Alfresco.constants.PROXY_URI_RELATIVE + "api/upload");
    xhr.send(formData);
  }
}

具有稍后添加的必要事件侦听器。似乎现有的和标准的Alfresco AJAX方法严重修改了正在发出的底层请求，这使得人们很难简单地发送

FormData（）

对象