リネームツールどうしても空になる

前提・実現したいこと

ブックマークから呼び出せるファイルのリネームツールを作ろうとしていました。
何度やってもnullかundefinedしか出てこないので困っています。

コード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4<script>
5function filesave(){
6  moji = document.getElementById('moji').files[0];//ファイルの取得
7  var reader = new FileReader();
8  reader.readAsText(moji); //データの読み取り
9  moji = reader.result; //結果を返す
10  filename = document.getElementById('name').value; //ファイルの名前をセット
11  mime = document.getElementById('mime').value; //MIMEタイプをセット(不要かも)
12  var blob = new Blob([moji], {type: mime}); //blobに格納
13  var link = document.createElement('a'); //ダウンロードボタンのかわり
14  link.href = URL.createObjectURL(blob);  
15  link.download = filename;
16  link.click();
17  URL.revokeObjectURL(link.href); //作ったものの後処理
18} 
19</script>
20</head>
21<body>
22ファイル<input type=file id=moji><br>
23名前(拡張子込み)<input type=text id=name><br>
24mimeタイプ<input type=text id=mime><br>
25<br>
26<button Onclick=filesave()>保存</button>
27</body>
28</html>

やってみたこと

readAsTextの部分を色々変えてみる(readAsArrayBufferとか)
→結果変わらずでした。もっとひどくなりました。

よろしくお願いします。

退会済みユーザー

2022/03/16 00:29

moji = reader.result; で値は入ってましたか？ブラウザ上のDevToolsや開発ツールでコードをステップ実行しながら、変数の値をチェックするとよいかもしれません。

退会済みユーザー

2022/03/16 03:50

ありがとうございます。次からはそうしてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

[reader.readAsText()]は非同期処理なので、ファイルの読み込み完了を待ちません。
そのため[reader.onload]を利用して、読み込み終了を待ってください。
https://developer.mozilla.org/ja/docs/Web/API/FileReader/result

以下、僕の環境で試した例です。

JavaScript
1function filesave(){
2  let file = document.getElementById('moji').files[0];//ファイルの取得
3  let reader = new FileReader();
4  reader.onload = function() {
5    let moji = reader.result; //結果を返す
6    let filename = document.getElementById('name').value; //ファイルの名前をセット
7    let mime = document.getElementById('mime').value; //MIMEタイプをセット(不要かも)
8    let blob = new Blob([moji], {type: mime}); //blobに格納
9    let link = document.createElement('a'); //ダウンロードボタンのかわり
10    link.href = URL.createObjectURL(blob);  
11    link.download = filename;
12    link.click();
13    URL.revokeObjectURL(link.href); //作ったものの後処理
14  };
15  reader.readAsText(file); //データの読み取り  
16}