js本地檔案讀寫
阿新 • • 發佈：2022-05-19
直接上程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>本地檔案讀寫</title> </head> <script type="text/javascript"> (function (console) { console.save = function (data, filename) { if (!data) { console.error('No data'); return; } if (!filename) filename = 'data.json'; if (typeof data === "object") { data = JSON.stringify(data, undefined, 4) } var blob = new Blob([data], {type: 'text/json'}), e = document.createEvent('MouseEvents'), a = document.createElement('a'); a.download = filename; a.href = window.URL.createObjectURL(blob); a.dataset.downloadurl = ['text/json', a.download, a.href].join(':'); e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e) } })(console); var arr = new Array(); var temp_str =""; var i = 0; function showPreview(source){ var input = source; var reader = new FileReader(); reader.readAsText(input.files[0]); reader.onload = function() { if(reader.result) { //顯示檔案內容 temp_str = reader.result; } }; } function showText() { if(temp_str=="") { alert("請先上傳檔案"); } else { document.getElementById("text").innerHTML=temp_str; } } function saveText() { var text = document.getElementById("text").value; if(text=="") { alert("沒有內容"); } else { console.save(text,"data.json"); } } </script> <body> <div style="display: flex; justify-content: center;"> <div id="div" align="center" style="width: 300px;height: 600px; background-color: #eee;"> <br> <input type="file" name="file" value="上傳檔案" onchange="showPreview(this)" /> <br> <br> <br> <br> <br> <input type="button" value="顯示檔案內容" onclick="showText()"> <br> <br> <input type="button" value="另存檔案內容" onclick="saveText()"> </div> <div id="div" align="center" style="width: 1000px;height: 600px; background-color: #000000;"> <textarea id="text"style="width: 1000px;height: 600px; background-color: #000000; color: #ffffff;"></textarea> </div> </div> </body> </html>