Question

我正在尝试使用我正在为Alfresco开发的dashlet。这是一个简单的拖放文件上传小面板，使用HTML 5的拖放和文件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客户端等内容完全不同。上面的代码使用Content-Type: application/x-www-form-urlencoded生成请求，而使用REST客户端或Alfresco Share的标准上载器使用Content-Type: multipart/form-data。如果我需要使用multipart/form-data提交表单，那么最简单的方法是写出请求正文（包含边界，Content-Disposition等等）以包含正在上传的文件？

Answer 1

我放弃了通过javascript创建表单HTML元素的想法，并假设如果浏览器支持File API和Drag and Drop API，他们可能也会支持XMLHttpRequest2 API。根据{{3}}，上面的代码现在为：

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()对象。

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

1 个答案: