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 ネットワーク トラッキングでは、リクエストが常に保留中として表示されます。
更新: 大きなファイル (1 MB 以上) をアップロードできません。チャンクするかどうか、またはチャンクのサイズは問題ではありません。画像サイズが 1MB を超えるとアップロードされません。
添付のエラーのスクリーンショットを参照してください
