1. 首頁
  2. 問答
  3. 我可以使用JAVASCRIPT/jQuery將輸入從表單保存到HTML中的.txt中，然後使用它？

我可以使用JAVASCRIPT/jQuery將輸入從表單保存到HTML中的.txt中，然後使用它？

2012-12-03 47 views

回答

-1

答案是肯定的

<html> 
<head> 
</head> 
<body> 
<script language="javascript"> 
function WriteToFile() 
{ 
var fso = new ActiveXObject("Scripting.FileSystemObject"); 
var s = fso.CreateTextFile("C:\\NewFile.txt", true); 
var text=document.getElementById("TextArea1").innerText; 
s.WriteLine(text); 
s.WriteLine('***********************'); 
s.Close(); 
} 
</script> 

<form name="abc"> 
<textarea name="text">FIFA</textarea> 
<button onclick="WriteToFile()">Click to save</Button> 
</form> 

</body> 
</html>

來源

2012-12-03 14:30:30 topcat3

+7

......並且這僅適用於InternetExplorer，並且只有在安全設置允許的情況下才適用。 – Pointy

+1

我只看到ActiveXObject;我認爲這只是IE瀏覽器？ – 2012-12-03 14:32:21

+0

正確！並且注意它允許這個功能是非常不安全的 – topcat3

1

您可以使用localStorage保存以供日後使用中的數據，而是使用JavaScript（在瀏覽器中），你不能保存到文件。

要全面： 您不能使用瀏覽器中的JavaScript將某些內容存儲到文件中，但using HTML5可以讀取文件。

來源

2012-12-03 14:33:02 davidpfahler

0

如果不使用服務器端邏輯，則無法將其另存爲本地文件。但是，如果這符合您的需求，您可以看看本地存儲的HTML5或我們的JavaScript插件jStorage

來源

2012-12-03 14:33:08

11

只有在用戶允許它像下載一樣保存並且他必須手動打開它時纔可以保存，唯一的問題是建議一個名稱，我的示例代碼將僅爲Google Chome提供一個名稱，並且僅在您使用鏈接而不是按鈕時纔會提供，因爲該屬性爲download。

您將只需要一個base64 encode library和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>

來源

2012-12-04 13:24:54

0

這將工作負載和從一個HTML頁面將文件保存成TXT用保存作爲首選

<html> 
<body> 

<table> 
    <tr><td>Text to Save:</td></tr> 
    <tr> 
     <td colspan="3"> 
      <textarea id="inputTextToSave" cols="80" rows="25"></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td>Filename to Save As:</td> 
     <td><input id="inputFileNameToSaveAs"></input></td> 
     <td><button onclick="saveTextAsFile()">Save Text to File</button></td> 
    </tr> 
    <tr> 
     <td>Select a File to Load:</td> 
     <td><input type="file" id="fileToLoad"></td> 
     <td><button onclick="loadFileAsText()">Load Selected File</button><td> 
    </tr> 
</table> 

<script type="text/javascript"> 

function saveTextAsFile() 
{ 
    var textToSave = document.getElementById("inputTextToSave").value; 
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); 
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); 
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value; 

    var downloadLink = document.createElement("a"); 
    downloadLink.download = fileNameToSaveAs; 
    downloadLink.innerHTML = "Download File"; 
    downloadLink.href = textToSaveAsURL; 
    downloadLink.onclick = destroyClickedElement; 
    downloadLink.style.display = "none"; 
    document.body.appendChild(downloadLink); 

    downloadLink.click(); 
} 

function destroyClickedElement(event) 
{ 
    document.body.removeChild(event.target); 
} 

function loadFileAsText() 
{ 
    var fileToLoad = document.getElementById("fileToLoad").files[0]; 

    var fileReader = new FileReader(); 
    fileReader.onload = function(fileLoadedEvent) 
    { 
     var textFromFileLoaded = fileLoadedEvent.target.result; 
     document.getElementById("inputTextToSave").value = textFromFileLoaded; 
    }; 
    fileReader.readAsText(fileToLoad, "UTF-8"); 
} 

</script> 

</body> 
</html>

來源

2017-03-03 01:38:37 SeekLoad

0

或者，這也可以工作方式相同，但沒有保存爲選擇：

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

來源

2017-03-03 02:57:41 SeekLoad

0

最好的解決辦法，如果你問我是這樣的。 這將使用您選擇的文件名保存文件，並自動以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>

來源

2017-03-03 05:36:59 SeekLoad

相關問題

 相關問題