使用单个.txt文件填充HTML表单中的许多文本区域

问题描述 投票：1回答：2

我正在制作一个完全客户端的html文件，根据其许多文本区域和文本字段的内容导出.txt文件。当我尝试将相同的.txt文件重新导入页面时出现问题，截至目前，它填充了具有相同内容的所有文本区域，而我希望它只填充特定的内容。例如。文本区域1,2和3将其内容添加到单个.txt文件中，导入后，所有文本区域都包含来自文本区域1,2和3的内容。这是我当前的HTML代码

(function() {
	var input = document.getElementById("fileinput");
    input.addEventListener("change", loadFile, false);

    function loadFile() {
        var file, fr;

        if (typeof window.FileReader !== 'function') {
            alert("The file API isn't supported on this browser yet.");
            return;
        }

        if (!input.files) {
            alert("This browser doesn't seem to support the `files` property of file inputs.");
        } else if (!input.files[0]) {
            alert("Please select a file before clicking 'Load'");
        } else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedText;
            fr.readAsText(file);
        }

        function receivedText() {
			document.getElementById("input1").value = fr.result;
			document.getElementById("input2").value = fr.result;
			document.getElementById("input3").value = fr.result;

        }
    }
})();

function saveFormAsTextFile()
        // Based on https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
        {
        var textToSave =
          document.getElementById('input1').value + '\n' +
          document.getElementById('input2').value + '\n' +
		  document.getElementById('input3').value

         var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
        var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
        var fileNameToSaveAs = document.getElementById("input1").value;

        var downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.innerHTML = "Download File";
        downloadLink.href = textToSaveAsURL;
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);

        downloadLink.click();
        }

    function destroyClickedElement(event)
        {
        document.body.removeChild(event.target);
        }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<button onclick="saveFormAsTextFile()">Save</button></strong> 
<form name="mainForm" method="get" id="Main">
<p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
<p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
<p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
<p>
   <div>
   <label for="file">Choose file to upload</label>
   <input type="file" id='fileinput' accept=".txt">
 </div>
</form>



</body>
</html>
javascript html
2个回答
0
投票

你加入\n的文本

  var textToSave =
    document.getElementById('input1').value + '\n' +
    document.getElementById('input2').value + '\n' +
    document.getElementById('input3').value

所以只需用.split('\n')反向步骤

    function receivedText() {
      var data = fr.result.split('\n');
      document.getElementById("input1").value = data[0];
      document.getElementById("input2").value = data[1];
      document.getElementById("input3").value = data[2];
    }

演示

(function() {
  var input = document.getElementById("fileinput");
  input.addEventListener("change", loadFile, false);

  function loadFile() {
    var file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    } else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText() {
      var data = fr.result.split('\n');
      document.getElementById("input1").value = data[0];
      document.getElementById("input2").value = data[1];
      document.getElementById("input3").value = data[2];
    }
  }
})();

function saveFormAsTextFile()
// Based on https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
{
  var textToSave =
    document.getElementById('input1').value + '\n' +
    document.getElementById('input2').value + '\n' +
    document.getElementById('input3').value

  var textToSaveAsBlob = new Blob([textToSave], {
    type: "text/plain"
  });
  var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  var fileNameToSaveAs = document.getElementById("input1").value;

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);

  downloadLink.click();
}

function destroyClickedElement(event) {
  document.body.removeChild(event.target);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>
  <button onclick="saveFormAsTextFile()">Save</button></strong>
  <form name="mainForm" method="get" id="Main">
    <p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
      <p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
        <p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
          <p>
            <div>
              <label for="file">Choose file to upload</label>
              <input type="file" id='fileinput' accept=".txt">
            </div>
  </form>



</body>

</html>

旁注：您的代码中的文件上传在Safari中不起作用

0
投票

它出现在函数receiveText中，您将所有三个元素设置为相同的字符串'fr.result“。

您需要一种方法来划分文本内容，以便将其拆分为多个字符串并将每个子字符串分配给单独的字段。

也许简单的XML结构会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.