Html5 块上传在 Chrome 25 中不起作用？答案

【问题标题】：Html5 Chunk Upload not working in Chrome 25?Html5 块上传在 Chrome 25 中不起作用？
【发布时间】：2013-03-14 21:29:58
【问题描述】：

我有以下代码使用 Html5 上传图片。

<!DOCTYPE html>
<form>
<div class="example">
    #bytes/chunk:
    <input id="numChunks" value="1048576" />
    <input id="files" class="button" type="file" />
    <div id="bars">
        <span id="numofchunks">Num of chunks: </span>
        <br />
        <span id="message"></span>
    </div>
</div>
</form>
<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        document.querySelector('input[type="file"]').addEventListener('change', function (e) {
            var blob = this.files[0];

            var BYTES_PER_CHUNK = (1024 * 1024) / 2; // 1MB chunk sizes.
            var SIZE = blob.size;
            $('#numofchunks').text($('#numofchunks').text() + SIZE / BYTES_PER_CHUNK);
            var start = 10;
            var end = BYTES_PER_CHUNK;
            var counter = 1;
            while (start < SIZE) {
                upload(blob.slice(start, end), counter);

                start = end;
                end = start + BYTES_PER_CHUNK;
                counter = counter + 1;
            }
        }, false);

    });

        function upload(blobOrFile, counter) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/basic/html5', true);
            xhr.setRequestHeader("Content-Type", "image/jpeg");
            //            xhr.setRequestHeader("X-File-Name", blobOrFile.fileName);
            xhr.onload = function () { $('#message').text($('#message').text() + counter + "  ") };

            var fd = new FormData();
            fd.append("fileToUpload", blobOrFile);
            xhr.send(fd);
        };


</script>

这适用于所有浏览器，但不适用于我的 Chrome。在 Chrome 中，我没有收到服务器上的请求。在 chrome 网络跟踪中，它始终将请求显示为待处理。

更新：我无法上传大文件（超过 1mb）。我是否将其分块或块的大小都没有关系。如果图像大小超过 1mb，则不会上传。

请看附上的错误截图

【问题讨论】：

值得注意的是，this.files[0] 在 IE 10 以下的版本中不起作用。
如果传递整个文件会发生什么？
@James：谢谢，你对 IE 是正确的。但我们正在尝试解决 Chrome 问题。
@Jack：如果文件大小超过 1mb，则不会上传。请看我的更新
我可以通过将这些更改添加到 web.config 来传递整个文件（最大 500mb）： system.web>

标签： javascript html file-upload

【解决方案1】：

试试这个

function(){
            var blobs = [];

/*
 * function that uploads a fragment of the file
 */
        function uploadChunk(blob, fileName, fileType){

            var xhr = new XMLHttpRequest();

            xhr.open('POST', 'upload_chunks.cfm', false);

            xhr.onload = function(e){
                document.getElementById("messages").innerHTML += "Chunk of size " + blob.size + " uploaded successfully.<br/>";
            }

            xhr.setRequestHeader('X_FILE_NAME', fileName);
            xhr.setRequestHeader('Content-Type', fileType)
            document.getElementById("messages").innerHTML += "Uploading chunk of size " + blob.size + ".<br/>";
            xhr.send(blob);
        }

/*
 * Invoke this function when the file is selected.
 */
        document.querySelector('#userfile').addEventListener('change', function(){
            var file = this.files[0];
            var bytes_per_chunk = 1024 * 1024;
            var start = 0;
            var end = bytes_per_chunk;
            var size = file.size;

            while (start < size) {
    //push the fragments to an array
                blobs.push(file.slice(start, end));
                start = end;
                end = start + bytes_per_chunk;
            }

    //upload the fragment to the server
            while (blob = blobs.shift()) {
    uploadChunk(blob, file.name, file.type);
            }
        })
    })();

来自http://www.sagarganatra.com/

【讨论】：

非常感谢，我试过你的代码，它给出了这个错误：未捕获的错误：NETWORK_ERR: XMLHttpRequest Exception 101 Html5:71 uploadChunk Html5:71 (anonymous function)，来自第一个块

【解决方案2】：

这是另一种可能的解决方案

https://github.com/tbela99/uploadManager/tree/master/Source

感谢蒂埃里·贝拉

【讨论】：