我可以在 html 表單輸入字段中顯示我的文本文件數據嗎？ 如果是，請告訴我怎么做？

Question

設置字段：我的代碼從最終用戶獲取輸入並將表單數據存儲在一個文本文件中。

信息字段：在這里您可以看到我們之前存儲的表單數據（文本文件）。

我的要求是：想在 html 表單上顯示我們存儲的表單數據。

例如：我的文本文件包含：設備 ID：SLSK10209849，此數據必須顯示在 html 表單輸入字段中

總而言之，如何在 HTML 表單輸入字段中顯示文本文件表單數據

這是我的代碼：

 function download() { var filename = window.document.myform.docname.value; var name = window.document.myform.name.value; var meterno = window.document.myform.meterno.value; var volth = window.document.myform.volth.value; var curth = window.document.myform.curth.value; var sht = window.document.myform.sht.value; var seasonal = window.document.myform.seasonal.value; var mno = window.document.myform.mno.value; var imno = window.document.myform.imno.value; var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + "Device ID: " + encodeURIComponent(name) + "\n\n" + "Meter Number: " + encodeURIComponent(meterno) + "\n\n" + "Voltage Threshold: " + encodeURIComponent(volth) + "\n\n" + "Current Threshold: " + encodeURIComponent(curth) + "\n\n" + "Server Hit Time: " + encodeURIComponent(sht) + "\n\n" + "Seasonal: " + encodeURIComponent(seasonal) + "\n\n" + "Mobile No: " + encodeURIComponent(mno) + "\n\n" + "IMEI Number: " + encodeURIComponent(imno) + "\n\n" + encodeURIComponent("")); pom.setAttribute('download', filename); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom); } document.getElementById('inputfile').addEventListener('change', function() { var fr = new FileReader(); fr.onload = function() { document.getElementById('output').textContent = fr.result; } fr.readAsText(this.files[0]); }) function switch_div(show) { document.getElementById("show_" + show).style.display = "block"; document.getElementById("show_" + ((show == 1)? 2: 1)).style.display = "none"; }

 .button { width: 100px; height: 30px; display: inline-block; background-color: #A9A9A9; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; border-radius: 15px; }.hide { display: none; }

 <div class="button" onclick="switch_div(1);"> Setup </div> <div class="button" onclick="switch_div(2);"> Info </div> <div class="content hide" id="show_1"> <form name="myform" method="post"> <label> File Name:</label> <input type="text" id="docname" value="name.txt" /><br/><br/> <label> Device ID:</label> <input type="text" id="name" /><br/><br/> <label> Meter Number:</label> <input type="text" id="meterno" /><br/><br/> <label> Voltage Threshold:</label> <input type="text" id="volth" /><br/><br/> <label> Current Threshold:</label> <input type="text" id="curth" /><br/><br/> <label> Server Hit Time:</label> <input type="text" id="sht" /><br/><br/> <label> Date:</label> <input type="date" id="seasonal"><br/><br/> <label> Mobile Number:</label> <input type="text" id="mno" /><br/><br/> <label> IMEI Number:</label> <input type="text" id="imno" /><br/><br/> <input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" /> </form> </div><br/><br/><br/><br/> <div class="content hide" id="show_2"> <input type="file" name="inputfile" id="inputfile"> <br> <pre id="output"></pre> </div>

Answer 1

這是一種方法

我假設一個文件完全按照格式

Device ID: did1

Meter Number: mnr1

Voltage Threshold: VT

Current Threshold: CT

Server Hit Time: SHT

Seasonal: Summer

Mobile No: 123456789

IMEI Number: 123984712349871320

 function switch_div(show) { document.getElementById("show_" + show).style.display = "block"; document.getElementById("show_" + ((show == 1)? 2: 1)).style.display = "none"; } const fieldNames = { "Device ID": "name", "Meter Number": "meterno", "Voltage Threshold": "volth", "Current Threshold": "curth", "Server Hit Time": "sht", "Seasonal": "seasonal", "Mobile No": "mno", "IMEI Number": "imno" }; document.getElementById('inputfile').addEventListener('change', function() { var fr = new FileReader(); fr.onload = function() { const lines = fr.result.split(/(?:\r?\n)+/); lines.forEach(line => { const [desc, val] = line.split(": "); const name = fieldNames[desc]; document.myform[name].value = val; }); } fr.readAsText(this.files[0]); })

 .button { width: 100px; height: 30px; display: inline-block; background-color: #A9A9A9; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; border-radius: 15px; }.hide { display: none; }

 <div class="button" onclick="switch_div(1);"> Setup </div> <div class="button" onclick="switch_div(2);"> Info </div> <div class="content hide" id="show_1"> <form name="myform" method="post"> <label> File Name:</label> <input type="text" id="docname" value="name.txt" /><br/><br/> <label> Device ID:</label> <input type="text" id="name" /><br/><br/> <label> Meter Number:</label> <input type="text" id="meterno" /><br/><br/> <label> Voltage Threshold:</label> <input type="text" id="volth" /><br/><br/> <label> Current Threshold:</label> <input type="text" id="curth" /><br/><br/> <label> Server Hit Time:</label> <input type="text" id="sht" /><br/><br/> <label> Date:</label> <input type="date" id="seasonal"><br/><br/> <label> Mobile Number:</label> <input type="text" id="mno" /><br/><br/> <label> IMEI Number:</label> <input type="text" id="imno" /><br/><br/> <input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" /> </form> </div><br/><br/><br/><br/> <div class="content hide" id="show_2"> <input type="file" name="inputfile" id="inputfile"> <br> </div>