Question

我正在尝试使用web Workers来提高文件上传性能。我正在研究this post about large file uploads的一个例子。我有一个（有些）更完整的代码示例，适用于Chrome（36.0.1985.143）和Safari（7.0.3（9537.75.14）），但不适用于Firefox（31.0）。我没有要共享的服务器代码，但客户端代码足以看出浏览器是否正在推动切片。 According to MDN，File和FileList都是可克隆的对象，这是Firefox中的一个错误吗？

原始链接来自StackOverflow上的this post。

在Firefox中，我遇到了错误：

（DataCloneError：无法克隆该对象。）

在这一行：

worker.postMessage({
 'files' : files
});

代码如下：

的index.html

<html>
<head>

<script>


 var worker = new Worker('fileupload.js');
 worker.onmessage = function(e) {
  alert(e.data);
 }

worker.onerror = werror;

function werror(e) {
  console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);
 }
function handleFileSelect(evt) {
 evt.stopPropagation();
 evt.preventDefault();
    var files;
    if(evt.dataTransfer === undefined ){
        files = document.getElementById('files').files;
    }else{
        files = evt.dataTransfer.files||evt.target.files;
    }
 // FileList object.

 worker.postMessage({
 'files' : files
 });
 //Sending File list to worker
 // files is a FileList of File objects. List some properties.
 var output = [];
 for (var i = 0, f; f = files[i]; i++) {
  output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
 }
 document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
 // Explicitly show this is a copy.
}

function setcode(){
 // Setup the dnd listeners.
 var dropZone = document.getElementById('drop_zone');
 dropZone.addEventListener('dragover', handleDragOver, false);
 dropZone.addEventListener('drop', handleFileSelect, false);
 document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
</script>
</head>
<body >

  <input type="file" id="files" name="files" multiple />
  <div id="drop_zone" style="width:500px;height:50%;">
   Drop files here
  </div> 
<div>
    <input type>
</div>
  <output id="list"></output>

<script>
    setcode();
</script>
</body>
</html>

fileupload.js

var file = [], p = true;
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', false);
 xhr.onload = function(e) {
 };
 xhr.send(blobOrFile);
}

function process() {
 for (var j = 0; j <file.length; j++) {
  var blob = file[j];

  const BYTES_PER_CHUNK = 1024 * 1024;
  // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while (start < SIZE) {

   if ('mozSlice' in blob) {
    var chunk = blob.mozSlice(start, end);
   } else if  ('webkitSlice' in blob) {
    var chunk = blob.webkitSlice(start, end);
   }else{
     var chunk = blob.slice(start, end);
   }

   upload(chunk);

   start = end;
   end = start + BYTES_PER_CHUNK;
  }
  p = ( j = file.length - 1) ? true : false;
  self.postMessage(blob.name + " Uploaded Succesfully");
 }
}


self.onmessage = function(e) {

for (var j = 0; j < e.data.files.length; j++)
  file.push(e.data.files[j]);

 if (p) {
  process()
 }

}

将File对象克隆到Web Worker

0 个答案: