html5 chunk and webworker does not upload anything

问题

I was working with html5 slice and webworker but when it goes to uploadFile function, nothing happened. nothing being upload

<html>
    <head>
        <title>Upload Files using XMLHttpRequest</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>     
    </head>

    <body>
        <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>
    </body>
</html>

<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]);  
    }
}

and for the fileupload.js

var file;
var p = true;

function uploadFile(blobFile, fileName, filePart, totalChunks) {         
    var xhr = new XMLHttpRequest();                
    xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);

    xhr.onload = function(e) {
    };


    xhr.send(blobFile);
}   

function process() {
    var blob = file;
    var originalFileName = blob.name;
    var filePart = 0

    const BYTES_PER_CHUNK = 100 * 1024 * 1024; // 100MB chunk sizes.
    var realFileSize = blob.size;

    var start = 0;
    var end = BYTES_PER_CHUNK;

    totalChunks = Math.ceil(realFileSize / BYTES_PER_CHUNK);

    while( start < realFileSize ) {
        //self.postMessage(start);
        //self.postMessage("test");

        var chunk = blob.slice(start, end);

        uploadFile(chunk, originalFileName, filePart, totalChunks);

        filePart++;
        start = end;
        end = start + BYTES_PER_CHUNK;
    }
}


self.onmessage = function(e) {
    file = e.data;
    /*for (var j = 0; j < e.data.length; j++) {
        files.push(e.data[j]);
    }*/

    if (p) {
        process();
    }
}

回答1:

To summarize your code:

 if (!blob.webkitSlice && !blob.mozSlice) {
     var chunk = blob.mozSlice(start, end);
     // or: var chunk = blob.webkitSlice(start, end);
 }

This is the line where you get that error from, and it should be obvious that you need to get an exception there.

Sure, for older versions of those browsers you probably should check for the prefixed functions. But if the "feature" detection has not matched, you will need to use the plain function - may it be because those vendors have dropped the prefixes, or the code is executed in some other browser (Opera, IE). See also Browser compatibility: Notes on the slice() implementations at MDN.

So, use this:

var slice = blob.webkitSlice || blob.mozSlice || blob.slice;
var chunk = slice.call(blob, start, end);

回答2:

Here is a complete working code.

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 {
    var chunk = blob.webkitSlice(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.length; j++)
  files.push(e.data[j]);

 if (p) {
  process()
 }

}

来源：https://stackoverflow.com/questions/13870127/html5-chunk-and-webworker-does-not-upload-anything

标签

php

javascript

html5

file

web-worker