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

标签 javascript xmlhttprequest

即使同时上传 100 个 5 MB 的文件(尽管它一次只处理 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);

  }

最佳答案

IS将花费大量的时间来获取文件的内容,对其进行base64编码,然后进行字符串连接。换句话说:按照预期行事。

关于javascript - 大文件上传导致浏览器挂起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7531713/

相关文章:

javascript - Typescript 错误 : Map. values() 给出 IterableIterator not Iterable

javascript - 如何在打开模式对话框时禁用控件单击事件

asp.net-mvc - 如何区分从 RenderAction 发出的请求和通过 AJAX 发出的请求?

javascript - window.XMLHttpRequest 的含义? ( Ajax )

javascript - 使用 jQuery.ajax 时如何限制/指定 json 响应

javascript - 请解释 RegExp javascript 行为

javascript - XHR 上传进度从一开始就是 100%

python - Scrapy 发布请求无效

javascript - 在不重新加载文件的情况下重新启动 gif 动画

java - 通过 ajax 将 blob 发送到 servlet