【发布时间】:2014-04-01 00:36:41
【问题描述】:
我希望我网站的用户在文本区域输入一些文本,当他提交表单时,他输入的文本存储在当前网页同一目录中的 .txt 文件中?我不知道它是如何完成的,或者即使它可以在 JavaScript 中完成。
怎么做?
【问题讨论】:
-
Javascript 不能像那样访问文件系统(在某些情况下可以)。您应该使用服务器端来保存文件等。
标签: javascript html file
我希望我网站的用户在文本区域输入一些文本,当他提交表单时,他输入的文本存储在当前网页同一目录中的 .txt 文件中?我不知道它是如何完成的,或者即使它可以在 JavaScript 中完成。
【问题讨论】:
标签: javascript html file
是的,您可以,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。
演示:
更多阅读:
【讨论】:
你不能。您需要一些服务器端脚本来访问服务器的文件系统,例如 PHP 或 Java。
【讨论】:
这个可能对你有帮助。
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
【讨论】:
您可以通过 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;
}
}
【讨论】:
您不能在服务器或客户端系统中使用 js 保存文件。 您需要像 php 或 asp.net 这样的服务器端脚本来将文件保存到服务器。但除了 cookie 之外,无法将任何内容保存到客户端系统。
【讨论】: