繁体   English   中英

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

[英]How to save and edit a file using JavaScript?

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

怎么做到呢?

是的,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界面


编辑2016年更新

我的原始答案显示了一个使用BlobBuilder接口的示例,该接口已被弃用并标记为已过时 现在建议使用Blob Construct来操作二进制数据。

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

演示:

更多阅读:

这个可能对你有帮助。

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

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

您可以通过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;
        }
    }

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM