Javascript 大文件上传导致浏览器挂起

Javascript 大文件上传导致浏览器挂起,javascript,xmlhttprequest,Javascript,Xmlhttprequest,即使同时上载100个5兆字节的文件(虽然一次只处理5个文件,其余的文件都会排队),小文件也会顺利进行,但150MB的文件会导致浏览器在启动时挂起几秒钟 function start(file) { var xhr = new XMLHttpRequest(); ++count; var container = document.createElement("tr"); var line = document.createElement("td");

即使同时上载100个5兆字节的文件(虽然一次只处理5个文件,其余的文件都会排队),小文件也会顺利进行,但150MB的文件会导致浏览器在启动时挂起几秒钟

  function start(file) {
    var xhr = new XMLHttpRequest();
    ++count;

    var container = document.createElement("tr");

    var line = document.createElement("td");
    container.appendChild(line);
    line.textContent = count + ".";

    var filename = document.createElement("td");
    container.appendChild(filename);
    filename.textContent = file.fileName;
    filename.className = "filename";

    initXHREventTarget(xhr.upload, container);

    var tbody = document.getElementById('tbody');
    tbody.appendChild(container);
    tbody.style.display = "";

    var boundary = "xxxxxxxxx";

    xhr.open("POST", "uploader.php");

    xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.  
    xhr.setRequestHeader("Content-Length", file.size); 

    xhr.onreadystatechange = function() {  
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
                if (xhr.responseText != "") {  
                    alert(xhr.responseText); // display response.  
                }  
            }  
        } 
    }

    var body = "--" + boundary + "\r\n";  
    body += "Content-Disposition: form-data; name='upload'; filename='" + file.fileName + "'\r\n";  
    body += "Content-Type: application/octet-stream\r\n\r\n";   
    body += $.base64Encode(file.getAsBinary()) + "\r\n";  
    body += "--" + boundary + "--";
    xhr.sendAsBinary(body);

  }
功能启动(文件){
var xhr=new XMLHttpRequest();
++计数;
var container=document.createElement(“tr”);
var行=document.createElement(“td”);
container.appendChild(行);
line.textContent=count+“;
var filename=document.createElement(“td”);
container.appendChild(文件名);
filename.textContent=file.filename;
filename.className=“filename”;
initXHREventTarget(xhr.upload,容器);
var tbody=document.getElementById('tbody');
t车身附件(容器);
tbody.style.display=“”;
var boundary=“xxxxxxxxx”;
open(“POST”,“uploader.php”);
setRequestHeader(“内容类型”,“多部分/表单数据,边界=”+boundary);//模拟文件MIME POST请求。
setRequestHeader(“内容长度”,file.size);
xhr.onreadystatechange=函数(){
if(xhr.readyState==4){

如果((xhr.status>=200&&xhr.status它将花费大量的时间读入文件的内容,对其进行base64编码,然后进行字符串连接。换句话说,按照预期的方式进行操作。

根据这些大量的数据,听起来像预期的行为,不是吗?这真的是个问题吗?所以您的唯一的抱怨是在检索和发布大文件时浏览器挂起?表明它根本不必挂起。当我将同一个大文件放入其中时,浏览器不会挂起,我仍然可以切换选项卡,甚至取消文件启动。那么它们有什么不同呢?(注意:您需要使用firefox来获得mediafire的拖放功能,并了解我的意思)