お世話になります。
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>
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。