【问题标题】:How to save and edit a file using JavaScript?如何使用 JavaScript 保存和编辑文件?
【发布时间】:2014-04-01 00:36:41
【问题描述】:

我希望我网站的用户在文本区域输入一些文本,当他提交表单时,他输入的文本存储在当前网页同一目录中的 .txt 文件中?我不知道它是如何完成的,或者即使它可以在 JavaScript 中完成。

怎么做?

【问题讨论】:

  • Javascript 不能像那样访问文件系统(在某些情况下可以)。您应该使用服务器端来保存文件等。

标签: javascript html file


【解决方案1】:

是的,您可以,HTML5 File API 有一个saveAs API,可用于使用 Javascript 保存二进制数据。您可以通过首先将数据放入画布并将其保存为:

canvas.toBlob(function(blob) {
  saveAs(blob, filename);
});

看到这个demo,文本文件实际上是在没有PHP的浏览器中生成的。 http://eligrey.com/demos/FileSaver.js/

2011 年 Eli Gray 在 html5rocks 上写了一篇出色的文章:http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

更多阅读 W3C:Filesaver interface


编辑 2016 年更新

我的原始答案显示了一个使用 BlobBuilder 接口的示例,该接口一直是deprecated and marked as obsolete。现在推荐使用Blob Construct来操作二进制数据。

在发布时,Blob 构造为supported on all major browsers。 IE 11、Edge 13、Firefox 43、Chrome 45、Safari 9、Opera 35、iOS Safari 8.4、Android Chrome 49。

演示:

更多阅读:

【讨论】:

  • 据我所知,这并不能满足原始发帖人的要求。他们想要一个可以更新并保存到服务器的文件,而不是可以在客户端下载的文件。
【解决方案2】:

你不能。您需要一些服务器端脚本来访问服务器的文件系统,例如 PHP 或 Java。

【讨论】:

    【解决方案3】:

    这个可能对你有帮助。

    http://wcetdesigns.com/tutorials/2012/11/01/edit-save-file.html
    https://web.archive.org/web/20131210151034/http://wcetdesigns.com/tutorials/2012/11/01/edit-save-file.html

    edit.php, file where users can edit using the textarea tag.
    <html>
    <head>
    <script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
    <script>
    function save(){
         var x = $("textarea").val();
         var data = 'c='+x;
    
         $.ajax({
             type: 'POST',
             url: 'save.php',
             data: data,
             success: function(e){
                 $("#s").html(e);
             }
         });
    }
    </script>
    </head>
    <body>
    <textarea>
    <?php
    
    $fn = "blank.html"; //FILE TO BE EDITED (FILENAME EDITABLE)
    $file = fopen($fn, "r+"); //OPENS IT
    $fr = fread($file, 1000000); //READS IT
    fclose($file); //CLOSE CONNECTIONS
    echo $fr; //SHOWS THE EDITABLE FILE HERE
    
    ?>
    </textarea><br>
    <input onClick="save()" id="x" type="button" value="Save"><br><br>
    <span id="s"></span><br>
    <a href="blank.html" target="_new">view file</a>
    </body>
    </html>
    save.php, file where the saving process will take place.
    <?php
    
    $c = $_POST["c"]; //TEXT FROM THE FIELD
    
    $f = 'blank.html'; //FILE TO SAVE (FILENAME EDITABLE)
    $o = fopen($f, 'w+'); //OPENS IT
    $w = fwrite($o, $c); //SAVES FILES HERE
    $r = fread($o, 100000); //READS HERE
    fclose($o); //CLOSES AFTER IT SAVES
    
    //DISPLAYS THE RESULTS
    if($w){
        echo 'File saved';
    } else {
        echo 'Error saving file';
    }
    
    ?> 
    

    Javascript 无法访问文件系统,因此您必须使用一些服务器端语言,如给定示例中的 PHP

    【讨论】:

      【解决方案4】:

      您可以通过 ajax 通过 javascript 发送特定的 textarea 值。然后在服务器端,您可以放置​​一个代码,您可以在其中接受字符串并将其保存在文本文件中。你不能只用 Javascript 来做,你需要一个服务器端代码..

              //Html
          <textarea id="TextArea"></textarea>
      
          //javascript
          var dataVal = $('#TextArea').val();
          if(dataVal!="")
          {
          $.ajax({
                      url: '/createTextFile',
                      type: 'POST',
                      contentType: 'application/json; charset=utf-8',
                      data: dataVal,
                      success: function (response) {
                          alert('Success');      
                      },
                      error: function (xhr) {
                          alert('Error: There was some error while posting. Please try again later.');
                      }
                  });
          }
      
          //You can server side code (C#)
      
          function SaveToTextFIle(text)
          {
              try
              {
                  // The using statement automatically closes the stream and calls  
                  // IDisposable.Dispose on the stream object. 
                  using (System.IO.StreamWriter file = new System.IO.StreamWriter(@"C:\Users\Public\TestFolder\WriteLines2.txt", true))
                  {
                      file.WriteLine(text);
                  }
              }
              catch(ex)
              {
                  throw ex;
              }
          }
      

      【讨论】:

        【解决方案5】:

        您不能在服务器或客户端系统中使用 js 保存文件。 您需要像 php 或 asp.net 这样的服务器端脚本来将文件保存到服务器。但除了 cookie 之外,无法将任何内容保存到客户端系统。

        【讨论】:

          最近更新 更多