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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

1312閲覧

【JavaScript】FileAPIについて

hachii

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2017/12/26 12:20

編集2017/12/26 13:12

###課題
ファイルの中身を取得し,そのファイルの中の文字数を数える.

###躓いている問題
ファイルの中身は取得できるが(String(16)で取得する仕様.),文字数を数えることができない.

###試したこと,結果
①.txt*ファイルを使用(中身は"orion"とだけ書かれています.)
②このファイルを,下記コードで読む.
③文字数が10文字と出てくることを期待するが,0文字と出てきた.
,とこんな感じでした.

JavaScript

1<body> 2 <input type="file" id="targetFile" multiple="multiple" accept=".txt*"> 3 <form name="test"> 4 <textarea name="txt" rows="10" clos="50" readonly id = "text1"></textarea><br> 5 </form> 6 7<script = "text/javascript"> 8 document.getElementById("text1").style.display = "none"; 9 function getFile(){ 10 var myFile = document.getElementById("targetFile") 11 var reader = new FileReader(); 12 13 reader.onload = function(evt){ 14 var allData = evt.target.result;//ファイル内容を格納する変数 15 var str = ""; 16 for(var i=0;i<allData.length;i++){ 17 var s = allData.charCodeAt(i).toString(16);//16進数で表示 18 19 if(s.length == 1){ 20 s="0"+s;//桁数を二桁にそろえる 21 } 22 if(i%16==15){ 23 bin += s+"<br>";//16個目で改行 24 }else{ 25 bin += s; 26 } 27 } 28 document.test.txt.value = str; 29 } 30 reader.readAsBinaryString(myFile);//ファイル内容をバイナリ文字列として返す 31 } 32 </script> 33 <input type = "button" value = "文字数は" onclick = "alert(test.txt.value.length + '文字です。')"> 34</body>

###聞きたいこと
htmlファイルを開き,出てくる画面のデザインはこの(テキストエリアが隠れた)ままで,ファイルの中身のデータを数えるにはどのようにしたらよいのでしょうか.
使用する言語はJavaScriptのみです.

以上,ご教示の程よろしくお願いします.

###追記
今回知りたいことは読み込んだファイルから文字数を数える方法・手順です.(この場はテキスト・バイナリにこだわらず,それぞれ応用していきたいと思います.)

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

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

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

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

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

yambejp

2017/12/26 12:31

orionと書かれているのに10文字なのでしょうか?英数文字のみで大丈夫ですか?改行や記号、スペースなどは文字数とカウントするのでしょうか?
hachii

2017/12/26 12:39 編集

今回はバイナリに直しているので10文字となります.改行は文字数としてカウントしたくありません.その他,記号・スペースはファイル中に必ず含まれていないものとします.よろしくお願いします.
yambejp

2017/12/26 12:46

ちょっと誤解があるかもしれないのでとりあえずsampleつけておきました。違う箇所があったら指摘して下さい
hachii

2017/12/26 12:53

変換するとorion→6f72696f6e となり10文字となるはずです.Sampleの方ですが,jqueryを使用していますでしょうか.申し訳ないのですが,JavaScriptのみの使用に制限してもよろしいでしょうか.よろしくお願いします.
yambejp

2017/12/26 12:54

jquery使ってませんよ。普通のjavascriptです
hachii

2017/12/26 12:55

そうなのですね.queryや#が出てきたので勝手に思い込んでいました.申し訳ないです.
yambejp

2017/12/26 12:57

いまのjavascriptはjqueryライクなオブジェクトの掴み方ができます。まずはサンプルをそのままコピペして(スクリプトの部分にはscriptタグで囲む)ファイル選択をしてみてください
hachii

2017/12/26 13:10

そうなのですね.コピペして試しました.orion出てきました.ここからテキストエリアを隠し,文字数を数えるにはどうすれば・・・.(テキストだろうとバイナリだろうと処理の流れは同じだと考えますので,今回はこのままテキストでお願いします.)
guest

回答1

0

ベストアンサー

とりあえず読んでtextareaに入れてみます。
命題がボケるので今回はmultipleは省略します

javascript

1 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#targetFile').addEventListener('change',function(e){ 4 var fr= new FileReader(); 5 fr.addEventListener('load',function(e){ 6 document.querySelector("#text1").value=e.target.result; 7 console.log(document.querySelector("#text1").value.length); 8 }); 9 fr.readAsText(e.target.files[0], "utf-8"); 10 }); 11});

HTML

1<input type="file" id="targetFile" accept=".txt*"> 2<form name="test"> 3<textarea name="txt" rows="10" clos="50" readonly id = "text1"></textarea><br> 4</form>

orionだと普通に5文字だとおもいますけど・・・

追記

textareaを経由しないバージョン、hex処理付き
面倒なのでそのままコピペできるようにしておきました

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#targetFile').addEventListener('change',function(e){ 4 var fr= new FileReader(); 5 fr.addEventListener('load',function(e){ 6 var str=hex(e.target.result); 7 console.log(str); 8 console.log(str.length); 9 }); 10 fr.readAsText(e.target.files[0], "utf-8"); 11 }); 12}); 13function hex(str) { 14 var result=""; 15 for(var i=0;i<str.length;++i){ 16 var h = ("0"+str.charCodeAt(i).toString(16)).substr(-2); 17 result += h; 18 } 19 return result; 20} 21</script> 22<input type="file" id="targetFile" accept=".txt*">

投稿2017/12/26 12:45

編集2017/12/26 13:18
yambejp

総合スコア114572

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

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

yambejp

2017/12/26 13:19

追記の方でうまくいくのでは?
hachii

2017/12/26 13:31 編集

動作のほうは期待通りに動くことを確認いたしました!しかし,いくつか分からない点があるので質問させていただきます. 質問①function(e)の()のなかのeとは何か. 質問②function hexの中にあるhはどこに使われているのか. 質問③私自身が提示したコードが期待通り動かなかったのは,textareaを経由していたため,strの中身を読み取ることができなかったためか. 以上3点です. 長くなってしまい申し訳ございませんが,よろしければ回答お願いいたします.
yambejp

2017/12/26 13:40

> function(e)の()のなかのe eはイベントのeです。コールバックにイベントが渡るので それを参照して利用します。(実際には使用していないものもある) たとえば「addEventListener('change',function(e){」のeは changeイベントを受け渡していると考えて下さい > function hexの中にあるhはどこに使われているのか hex関数内のhはstrから1文字ずつ取り出したデータを数値に変化し、16進変換したものの 先頭に0をつけて右から2文字抜き出したもの・・・をとりあえずおいておいてあるものです。 forループの中でhはresulutにどんどん流し込まれています。 > 私自身が提示したコードが期待通り動かなかったのは ごめんなさい、まったく参考にしなかったのでよく読んでません 一応命題でファイルはテキストを前提としているように読めたので 私はreadAsText()を選択しましたが質問者さんはreadAsBinaryStringを利用しているので たしょうロジックが違うのだと思います
hachii

2017/12/27 13:28

丁寧に回答してくださり誠にありがとうございました.いただいたコードを少しいじり,自分のやりたい動作を確認できました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問