如何在未定义FormData时在Web Workers中上载文件

时间:2012-12-14 00:19:06

标签: php javascript html5 xmlhttprequest web-worker

当我通过Web Worker上传时,如何在PHP中检索$_FILES?当我尝试使用FormData时,出现以下错误:

  

错误:未定义FormData

这是我的代码:

function uploadFile(blobFile, fileName, filePart, totalChunks) {
    //if I try to put this
    //var formData = new FormData(); //it does not work
    var xhr = new XMLHttpRequest();                
    xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);
    xhr.onload = function(e) {};
    xhr.send(blobFile);
}   

所以在upload.php中我应该如何从$_FILES获取tmp路径?为了以防万一,我还将展示引用Web worker的页面:

<form id="fileuploader" enctype="multipart/form-data" method="post" action="upload.php">
    <label for="fileToUpload">Select Files to Upload</label><br />
    <input type="file" name="fileToUpload[]" multiple="" id="fileToUpload" onchange="fileList();"/><br />
    <input type="button" onclick="sendRequest();" value="Upload" />
    <!-- a place for File Listing -->
    <div id="fileList"></div>           
</form>
<script type="text/javascript">
function sendRequest() {
    var worker = new Worker("fileupload.js");
    worker.onmessage = function(e) {
        alert(e.data);
    }
    var file = document.getElementById('fileToUpload');
    for(var i = 0; i < file.files.length; i++) { 
        worker.postMessage(file.files[i]);  
    }
}

1 个答案:

答案 0 :(得分:12)

我编写了以下polyfill来模拟Web Workers中的FormData方法。由于Web worker不支持DOM,因此也不支持new FormData(<HTMLFormElement>);构造函数调用 {(1}}和File个对象,但是polyfill支持类型化数组和字符串。

它最初是作为Upload a File in a Google Chrome Extension答案的一部分发布的。要查看如何使用它的示例,请查看其他答案。

Blob