【问题标题】:Writing html form data to a txt file without the use of a webserver在不使用网络服务器的情况下将 html 表单数据写入 txt 文件
【发布时间】:2013-05-28 01:51:15
【问题描述】:

我想知道是否有一种方法可以使用脚本将 html 表单数据提交/写入 txt 文件,但不使用 webserver、webhost、wamp、xamp 等。

我一直在尝试使用 php 脚本,但他们只是在提交时打开 php 文档。

感谢任何帮助:D

【问题讨论】:

标签: html


【解决方案1】:

这样的?

<!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}
</script>
</head>
<body>

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea rows=3 cols=50 name="text">Please type in this box. When you 

click the Download button, the contents of this box will be downloaded to 

your machine at the location you specify. Pretty nifty. </textarea>
  <input type="submit" value="Download">
</form>
</body>
</html>

【讨论】:

  • 这对我来说效果很好,为我节省了很多时间。 (有微小的变化)。感谢发帖。
【解决方案2】:

你可以使用JavaScript:

<script type ="text/javascript">
 function WriteToFile(passForm) {

    set fso = CreateObject("Scripting.FileSystemObject");  
    set s = fso.CreateTextFile("C:\test.txt", True);
    s.writeline(document.passForm.input1.value);
    s.writeline(document.passForm.input2.value);
    s.writeline(document.passForm.input3.value);
    s.Close();
 }
  </script>

如果这不起作用,另一种方法是 ActiveX 对象:

<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>

不幸的是,据我所知,ActiveX 对象仅在 IE 中受支持。

【讨论】:

  • 很好的答案。出于好奇,这个跨浏览器兼容吗?
  • @TaylorFlores 我相信是这样,主要是因为这也适用于旧版本的 JavaScript。我认为它通常应该有效。
  • 您的第一个示例看起来像旧的 ASP JScript(服务器端)。第二个示例仅在极其有限的情况下有效,即授予高权限的 Internet Explorer(如果仍然有效;我知道它在 IE 5-6 天内有效)。如果这样的代码可以不受信任地运行,那将是一个巨大的安全漏洞。
  • @TimMedora 第二个它只在 IE 中工作(正如我解释的那样),因为 ActiveX 只在 IE 中受支持。据我所知,这些是使用 JScript 的唯一方法
  • @TimMedora 很公平,我认为它确实有效。感谢您指出错误:)
【解决方案3】:

我对此代码进行了一些更改以保存单选按钮的条目,但无法保存选择单选按钮后出现在文本框中的文本。

代码如下:-

    <!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}
</script>
</head>
<body>

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
  <input type="submit" value="SAVE">
</form>
</body>
</html>

【讨论】:

    【解决方案4】:

    我知道这是旧的,但这是我在快速搜索中找到的第一个将表单数据保存到 txt 文件的示例。因此,我对上面的代码进行了一些编辑,使其工作更顺畅。现在可以更轻松地添加更多字段,包括 @user6573234 请求的单选按钮。

    https://jsfiddle.net/cgeiser/m0j7Lwyt/1/

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    form * {
      display: block;
      margin: 10px;
    }
    </style>
    <script language="Javascript" >
    function download() {
      var filename = window.document.myform.docname.value;
      var name =  window.document.myform.name.value;
      var text =  window.document.myform.text.value;
      var problem =  window.document.myform.problem.value;
      
      var pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
        "Your Name: " + encodeURIComponent(name) + "\n\n" +
        "Problem: " + encodeURIComponent(problem) + "\n\n" +
        encodeURIComponent(text)); 
    
      pom.setAttribute('download', filename);
    
      pom.style.display = 'none';
      document.body.appendChild(pom);
    
      pom.click();
    
      document.body.removeChild(pom);
    }
    </script>
    </head>
    <body>
    <form name="myform" method="post" >
      <input type="text" id="docname" value="test.txt" />
      <input type="text" id="name" placeholder="Your Name" />
      <div style="display:unblock">
        Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
        Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
        <input type="text" id="problem" />
      </div>
      <textarea rows=3 cols=50 id="text" />Please type in this box. 
    When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
      
      <input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
      
    </form>
    </body>
    </html>
    

    【讨论】:

      猜你喜欢
      • 2019-10-26
      • 1970-01-01
      • 2014-06-20
      • 1970-01-01
      • 2011-08-28
      • 2021-08-29
      • 2010-11-01
      • 2021-06-05
      • 2020-04-29
      相关资源
      最近更新 更多