0

我正在尝试为 Alfresco 开发的 dashlet 遇到问题。这是一个使用 HTML 5 的拖放和文件 API 的简单拖放文件上传 dashlet。对于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，写出请求正文（带有边界、内容处置等）以包含正在上传的文件的最简单方法是什么？

4

1 回答 1

0

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

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

于 2012-11-01T15:31:17.767 回答