HTML5,blob.slice(开始,结束)和FileReader()之间数据大小的差异[又名如何处理BLOB中的数据]

时间:2014-04-23 19:23:06

标签: javascript html5

This is我在HTML5中的第一个应用程序。应用程序读取本地文件,将其拆分为块并发送到服务器,这非常有效。

计划的一部分:

    var reader = new FileReader();

    // Read data from chunk
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        blob_content = evt.target.result; // This problem, chunk != blob_content
      }
    };

    chunk = blob.slice (start, end);
    reader.readAsBinaryString(chunk);
    // readAsBinaryString same

    xhr.open ("post", "upload.php", false);
    xhr.send (blob_content); // This send data about 30% larger
    // xhr.send (chunk); // This send data correctly

我需要处理数据块(例如加密)并且不知道如何处理。我的虚构函数生成的数据大约增加了30%。

mime类型可能有问题吗?

感谢。

抱歉,我的英语很棒。

1 个答案:

答案 0 :(得分:1)

感谢Bergi。

我完全通过事件将代码重写为Web worker和ArrayBuffer,ArrayBufferView并同步。

主要代码

(项目GitHub

  function upload_file () {

    chunk = blob.slice (start, end);
    index++;

    var worker_reader = new Worker('worker_reader.js');
    var worker_uploader = new Worker('worker_uploader.js');

    worker_reader.onmessage = function (event) {
      uload_array={"size": blob.size, "name": blob.name, "content": event.data, "index": index};
      document.getElementById("back_message").innerHTML = "Writing " + blob.name + " " + index;
      worker_reader.terminate();
      return worker_uploader.postMessage(uload_array);
    }

    worker_uploader.onmessage = function (event) {
      if (index < chunks_total) {
        start = end;
        end = start + BYTES_PER_CHUNK;
        var percentageDiv = document.getElementById ("percent");
        var progressBar = document.getElementById ("progressBar");

        percentageDiv.innerHTML = "0%";
        progressBar.max = chunks_total;

        progressBar.value = index;

        percentageDiv.innerHTML = Math.round (index/chunks_total * 100) + "%";
        document.getElementById("back_message").innerHTML = "Reading " + blob.name + " " + index;
        worker_uploader.terminate();
        return upload_file ();
      }
      else {
        upload_merge ();
      }
    }
    document.getElementById("back_message").innerHTML = "Reading " + blob.name + " " + index;
    worker_reader.postMessage(chunk);
  }

Bergi再次感谢。

编辑//添加终止工作程序并重新生成,因为Firefox在垃圾收集器中有错误。铬没有这个工作正常。 (文件超过200GB)