क्या टेक्स्ट फॉर्म (स्थानीय रूप से) को फ़ॉर्म से टेक्स्टफाइल में सहेजना संभव है, और उसके बाद उस दस्तावेज़ को बाद में उपयोग करने के लिए खोलें?क्या मैं जेएवीएएससीआरआईपीटी/jQuery का उपयोग करके HTML में फॉर्म से .txt में इनपुट सहेज सकता हूं, और फिर इसका उपयोग कर सकता हूं?
बस HTML, जावास्क्रिप्ट और jQuery का उपयोग कर। कोई डेटाबेस या PHP नहीं।
/डब्ल्यू
जवाब है हां
<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>
आप localStorage का उपयोग बाद में उपयोग के लिए डेटा को बचाने के लिए कर सकते हैं, लेकिन आप जावास्क्रिप्ट का उपयोग (ब्राउज़र में) एक फ़ाइल को नहीं बचा सकता है।
व्यापक होने के लिए: आप ब्राउज़र में जावास्क्रिप्ट का उपयोग करके फ़ाइल में कुछ स्टोर नहीं कर सकते हैं, लेकिन using HTML5, आप फ़ाइलों को पढ़ सकते हैं।
आप सर्वर साइड लॉजिक का उपयोग किये बिना इसे स्थानीय फ़ाइल के रूप में सहेज नहीं सकते हैं। लेकिन अगर यह आपकी जरूरतों को फिट करता है, तो आप एचटीएमएल 5 के स्थानीय स्टोरेज को देख सकते हैं या हमें jStorage
केवल सहेजना संभव है यदि उपयोगकर्ता इसे डाउनलोड की तरह ही सहेजने की अनुमति देता है और उसे मैन्युअल रूप से खोलना होगा, एकमात्र मुद्दा एक नाम का सुझाव देना है, मेरा नमूना कोड केवल Google क्रोम के लिए एक नाम सुझाएगा और केवल 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>
जो मैं समझता हूं, उससे आपको स्थानीय फ़ाइल को स्थानीय रूप से टेक्स्ट फ़ाइल में सहेजना होगा।
इस लिंक को चेक करें। देखें कि यह मदद करता है।
यह दोनों लोड करने के लिए काम करेंगे और एक के साथ एक 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>
के रूप में सहेजने या यह भी उसी तरह काम करेगा, लेकिन बिना एक के रूप में सहेजने पसंद:
<!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>
यदि आप मुझसे पूछते हैं तो सबसे अच्छा समाधान यह है। यह फ़ाइल को आपकी पसंद के फ़ाइल नाम से और स्वचालित रूप से 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>
गलत दृष्टिकोण। यहां तक कि यदि संभव हो, तो यह वेब पृष्ठों का उद्देश्य नहीं है। –
इसका उत्तर इस बात पर निर्भर करता है कि क्या आप सर्वर पक्ष या क्लाइंट साइड –