web-dev-qa-db-ja.com

JAVASCRIPT / jQueryを使用して、フォームの入力をHTMLの.textに保存してから使用できますか？

テキスト入力を（ローカルで）フォームからテキストファイルに保存し、後でそのドキュメントを開いて後で使用することは可能ですか？

HTML、javascript、jQueryを使用するだけです。データベースまたはphpはありません。

/ W

javascriptjqueryhtml5css3xhtml
9
XT_Nova

ユーザーがダウンロードのように保存することを許可し、手動で開く必要がある場合にのみ保存することができます、唯一の問題は名前を提案することです、私のサンプルコードはGoogle Chomeの名前のみを提案しますdownload属性のため、ボタンの代わりにリンクします。

base64エンコードライブラリ とJQueryがあれば簡単にできます。

<!DOCTYPE html>
<html>
<head><title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
<!--
// This will generate the text file content based on the form data
function buildData(){
    var txtData = "Name: "+$("#nameField").val()+
            "\r\nLast Name: "+$("#lastNameField").val()+
            "\r\nGender: "+($("#genderMale").is(":checked")?"Male":"Female");

    return txtData;
}
// This will be executed when the document is ready
$(function(){
    // This will act when the submit BUTTON is clicked
    $("#formToSave").submit(function(event){
        event.preventDefault();
        var txtData = buildData();
        window.location.href="data:application/octet-stream;base64,"+Base64.encode(txtData);
    });

    // This will act when the submit LINK is clicked
    $("#submitLink").click(function(event){
        var txtData = buildData();
        $(this).attr('download','sugguestedName.txt')
            .attr('href',"data:application/octet-stream;base64,"+Base64.encode(txtData));
    });
});
//-->
</script>
</head>
<body>
<form method="post" action="" id="formToSave">
    <dl>
        <dt>Name:</dt>
        <dd><input type="text" id="nameField" value="Sample" /></dd>
        <dt>Last Name:</dt>
        <dd><input type="text" id="lastNameField" value="Last Name" /></dd>
        <dt>Gender:</dt>
        <dd><input type="radio" checked="checked" name="gender" value="M" id="genderMale" />
            Male
            <input type="radio" checked="checked" name="gender" value="F" />
            Female
    </dl>
    <p><a href="javascript://Save as TXT" id="submitLink">Save as TXT</a></p>
    <p><button type="submit"><img src="http://www.suttonrunners.org/images/save_icon.gif" alt=""/> Save as TXT</button></p>
</form>
</body>
</html>
14
José Roberto Araújo Júnior

私が理解していることから、ユーザーの入力をテキストファイルにローカルに保存する必要があります。

このリンクを確認してください。これが役立つかどうかを確認してください。

ユーザー入力をテキストファイルにローカルに保存する

2
sugavaneshb

localStorageを使用して後で使用するためにデータを保存できますが、JavaScriptを使用して（ブラウザーで）fileに保存することはできません。

包括的：ブラウザのJavaScriptを使用してファイルに何かを保存することはできませんが、 HTML5を使用 の場合、ファイルを読み取ることができます。

1
davidpfahler

あなたが私に尋ねた場合の最良のソリューションはこれです。これは、選択したファイル名でファイルを保存し、自動的にHTMLまたはTXTボタンで選択します。

例：

<html>
<head>

<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}

function addTextHTML()
{
    document.addtext.name.value = document.addtext.name.value + ".html"
}

function addTextTXT()
{
    document.addtext.name.value = document.addtext.name.value + ".txt"
}
</script>

</head>
<body>

<form name="addtext" onsubmit="download(this['name'].value, this['text'].value)">

<textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea>
<br>
<input type="text" name="name" value="" placeholder="File Name">
<input type="submit" onClick="addTextHTML();" value="Save As HTML">
<input type="submit" onClick="addTexttxt();" value="Save As TXT">

</form>
</body>
</html>
1
SeekLoad

または、これは同じように機能しますが、別名で保存しない場合：

<!DOCTYPE html>
<html>
<head>


<script type='text/javascript'>//<![CDATA[
window.onload=function(){
(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };


  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();

}//]]> 

</script>


</head>

<body>
  <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>


  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "qm5AG"
    }], "*")
  }
</script>

</body>

</html>
0
SeekLoad

サーバー側のロジックを使用せずにローカルファイルとして保存することはできません。しかし、それがあなたのニーズに合うなら、あなたはhtml5のローカルストレージを見ることができます jStorage

0
A. Wolff