Question

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

怎么做？

Answer 1

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

来生成.txt文件

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

看到这个演示，文本文件实际上是在没有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。

演示：

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

更多阅读：

Answer 2

这个可能对你有帮助。

~~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

Answer 3

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

Answer 4

您可以通过javascript通过ajax发送特定的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;
        }
    }

Answer 5

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

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

怎么做？

5 个答案: