質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1210閲覧

JavaScript File API 「Uncaught TypeError: Cannot read property 'slice' of undefined」エラーになる

Y.NINOMIYA

総合スコア32

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/12/11 15:16

編集2020/12/11 22:22

お世話になります。

Blobを用いて分割読み込みする
上のサイトを参考にFile APIを使用したファイル分割を行いました。

下のコードは参考にしたコードのループの部分を再帰関数に置き換えています。
大きめのデータをサーバに分割で送るため、このような仕様にしました。

また、ファイルはbase64にエンコードしています。

その際、いろいろ試してみましたがどうしてもエラーから抜け出せません。

原因らしきものは、
2回目以降のループ(再帰関数でループと言ってよいのはか疑問だが)においてfiles(配列)が未定義になっているようです。
forでやるの中身が入っているのはなぜでしょうか....

どこかやり方が間違っていたりするのであればご教授願いたいです。
また、JavaScriptでファイルを分割して送信する他の効率的な方法があればそちらの情報もお聞きしたいです。

発生しているエラー

error

1chunk:26 Uncaught TypeError: Cannot read property 'slice' of undefined 2 at readBlobAsText (chunk:26) 3 at send_data (chunk:35) 4 at Object.<anonymous> (chunk:48) 5 at i (jquery.min.js:2) 6 at Object.add (jquery.min.js:2) 7 at chunk:46 8 at FileReader.reader.onload (chunk:14) 9readBlobAsText @ chunk:26 10send_data @ chunk:35 11(anonymous) @ chunk:48 12i @ jquery.min.js:2 13add @ jquery.min.js:2 14(anonymous) @ chunk:46 15reader.onload @ chunk:14 16load (async) 17readBlobAsText @ chunk:13 18send_data @ chunk:35 19(anonymous) @ chunk:58

該当のコード

HTML

1<html> 2 3<div> 4<input type="file" id="file2"> 5<button id="btn2">OK</button> 6</div> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8<script> 9 var files ; 10 function readBlobAsText(blob, size, callback) { 11 var offset = 0; 12 var reader = new FileReader(); 13 reader.onload = function(e) { 14 callback(e.target.readyState, e.target.result); 15 if (offset < blob.size) { 16 17 slice = blob.slice(offset, offset + size, blob.type); 18 offset += size; 19 reader.readAsText(slice, "utf-8"); 20 } 21 } 22 reader.onerror = function(e) { 23 console.log("error=" + e.target.error.name); 24 } 25 console.log(blob); 26 slice = blob.slice(offset, offset + size, blob.type); 27 offset += size; 28 reader.readAsText(slice, "utf-8"); 29} 30 31function send_data(i){ 32 console.log(i, files[i]); 33 34 readBlobAsText(files[i], 40000, function(state, data) { 35 console.log("------onload------"); 36 console.log("state=" + state); 37 console.log("length=" + data.length); 38 $.ajax({ 39 url:"/chunk", 40 type: "POST", 41 async: false, 42 data: { 43 "data": btoa(unescape(encodeURIComponent(data))), 44 } 45 }).done(function(data, textStatus, jqXHR){ 46 if(i >= files.length) return 0 47 else return send_data(i+1); 48}).fail(function(jqXHR, textStatus, errorThrown){ 49 send_data(i); 50}); 51 }); 52 } 53 54 55 document.getElementById("btn2").addEventListener("click", function(e) { 56 files = document.getElementById("file2").files; 57 send_data(0); 58 59}); 60</script> 61</html>

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

再帰の呼ばれ方から予想するに

if(i >= files.length) return 0

ではなく

if(i == files.length - 1) return 0

ではないでしょうか。

投稿2020/12/12 01:24

A_kirisaki

総合スコア2853

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問