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

Posted

技术标签:

【中文标题】Html5 块上传在 Chrome 25 中不起作用？【英文标题】：Html5 Chunk Upload not working in 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> 【参考方案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

感谢蒂埃里·贝拉

【讨论】：

以上是关于Html5 块上传在 Chrome 25 中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 mp3 音频在 Chrome 和 Firefox 中不起作用

html5 中的 hls 在 android chrome 浏览器中不起作用

上传文件在 Chrome 扩展选项页面中不起作用

FFMPEG 转换的视频在 HTML5 中不起作用

HTML5 视频在 Safari 中不起作用

html5 音频 mp3 在 Firefox 中不起作用