如何使用JavaScript保存和编辑文件？

Question

如何使用JavaScript保存和编辑文件？

javascripthtmlfile

11

我希望我的网站用户在文本区域中输入一些文本，当他提交表单时，输入的文本被存储在当前网页所在目录中存在的一个 .txt 文件中。我不知道该如何做，甚至不确定 JavaScript 是否能够完成这项任务。

如何实现？

- Faiz Ahmed

7

JavaScript 通常无法像那样访问文件系统（在某些情况下可以）。你应该使用服务器端来保存文件等操作。 - adeneo

5个回答

4

这个可能会对你有帮助。 ~~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。

- BKM

4

你无法使用JS在服务器或客户端系统上保存文件。您需要像PHP或ASP.NET这样的服务器端脚本来将文件保存到服务器，但不能保存除Cookie以外的任何内容到客户端系统中。

- Exlord

4

你无法直接访问文件系统。您需要一些服务器端脚本，例如PHP或Java来访问服务器的文件系统。

- blackpanther

3

您可以通过JavaScript将特定的textarea值通过ajax发送。然后在服务器端，您可以编写一段代码，在其中接受该字符串并将其保存到文本文件中。但您无法仅使用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;
        }
    }

- Pratik Bhoir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Wong · Accepted Answer

是的，你可以使用HTML5文件API的saveAs API来使用Javascript保存二进制数据。你可以通过先将数据放入画布中并将其保存为.txt文件来生成一个.txt文件：

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

看这个演示，文本文件实际上是在浏览器中生成的，而不需要使用PHP。 http://eligrey.com/demos/FileSaver.js/ 2011年Eli Grey在html5rocks上写了一篇优秀的文章： http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side 更多阅读请参考W3C： Filesaver interface 编辑于2016年更新

我的原始答案展示了如何使用BlobBuilder接口的示例，但现已被弃用和标记为过时。现在推荐使用Blob构造函数来操作二进制数据。

发布时，Blob构造函数支持所有主流浏览器。IE 11、Edge 13、Firefox 43、Chrome 45、Safari 9、Opera 35、iOS Safari 8.4、Android Chrome 49。

演示：

Koldev发布了jsfiddle，介绍了如何使用这个新构造函数来保存json文件。
链接：https://jsfiddle.net/koldev/cW7W5/

更多阅读：