html5塊和webworker不會上傳任何內容

我正在使用html5 slice和webworker，但是當它轉到uploadFile函數時，什麼也沒有發生。什麼是上傳html5塊和webworker不會上傳任何內容

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

來源

2012-12-13 Harts

您是否嘗試過* * * * blob.slice'？ – Bergi

@Bergi我認爲這是不同的Firefox或鉻？這就是爲什麼我們使用webkitslice或mozslice。但是，我只是試過它，它仍然沒有上傳任何東西.. – Harts

你能更準確地瞭解你得到的異常，以及你在哪個瀏覽器（版本）測試？ – Bergi

概括你的代碼：

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

這是你得到的是錯誤的行，它應該是顯然你需要在那裏得到一個例外。

當然，對於這些瀏覽器的舊版本，您可能應該檢查前綴函數。但是，如果「功能」檢測不匹配，則需要使用普通功能 - 可能是因爲這些供應商已刪除了前綴，或者代碼是在其他某個瀏覽器（Opera，IE）中執行的。另請參閱Browser compatibility: Notes on the slice() implementations at MDN。

所以，使用此：

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

來源

2012-12-13 23:41:13 Bergi

我認爲這個切片現在正在工作，在我使用上面的代碼之後，它仍然沒有上傳文件。我認爲這是因爲在upload.php中，$ tmp_name = $ _FILES ['fileToUpload'] ['tmp_name']; $ _FILES似乎什麼都沒有。任何想法？ – Harts

呃，我不是服務器端的專家。但是，您似乎並沒有在'fileToUpload'參數上面加載'multipart/form-data'，而只是在請求體中添加了一些blob - 我不知道如何訪問它們。 – Bergi

下面是一個完整的工作代碼。

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-18 12:56:31

OP已經有他想要修復的代碼;他不想要一個完整的替代品。你也沒有表明你正在鏈接到你顯然與之相關的博客。 –

html5塊和webworker不會上傳任何內容

回答

相關問題