Alfresco - 用javascript提交動態表單upload.post

Question

我遇到了一個我試圖爲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響應，並在我打開調試級記錄的網頁腳本，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。按照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()對象。