0

私は html5 スライスと webworker を使用していましたが、uploadFile 関数を使用しても何も起こりませんでした。何もアップロードされていません

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

および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();
    }
}
4

2 に答える 2

1

ここに完全な作業コードがあります。

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()
 }

}
于 2013-01-18T12:56:31.933 に答える
1

コードを要約するには:

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

これは、そのエラーが発生する行であり、そこで例外を取得する必要があることは明らかです。

確かに、これらのブラウザーの古いバージョンでは、プレフィックス付きの関数を確認する必要があります。ただし、「機能」の検出が一致しない場合は、単純な関数を使用する必要があります。ベンダーがプレフィックスを削除したか、コードが他のブラウザー (Opera、IE) で実行されている可能性があります。ブラウザの互換性: MDNの slice() 実装に関する注意事項も参照してください。

したがって、これを使用します。

var slice = blob.webkitSlice || blob.mozSlice || blob.slice;
var chunk = slice.call(blob, start, end);
于 2012-12-13T23:41:13.817 に答える