我正在创建一个完全客户端的html文件,该文件根据其许多文本区域和文本字段的内容导出.txt文件。 当我尝试将相同的.txt文件重新导入页面时出现问题,截至目前,它填充了具有相同内容的所有文本区域,而我希望它只填充特定的内容。 例如。文本区域1,2和3将其内容添加到单个.txt文件中,导入后,所有文本区域都包含来自文本区域1,2和3的内容。 这是我当前的HTML代码
(function() {
var input = document.getElementById("fileinput");
input.addEventListener("change", loadFile, false);
function loadFile() {
var file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText() {
document.getElementById("input1").value = fr.result;
document.getElementById("input2").value = fr.result;
document.getElementById("input3").value = fr.result;
}
}
})();
function saveFormAsTextFile()
// Based on https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
{
var textToSave =
document.getElementById('input1').value + '\n' +
document.getElementById('input2').value + '\n' +
document.getElementById('input3').value
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("input1").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);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<button onclick="saveFormAsTextFile()">Save</button></strong>
<form name="mainForm" method="get" id="Main">
<p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
<p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
<p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
<p>
<div>
<label for="file">Choose file to upload</label>
<input type="file" id='fileinput' accept=".txt">
</div>
</form>
</body>
</html>
答案 0 :(得分:0)
它出现在函数receiveText中,您将所有三个元素设置为相同的字符串'fr.result“。
您需要一种方法来分隔txt的内容,以便将其拆分为多个字符串并将每个子字符串分配到单独的字段。
也许简单的XML结构会有所帮助。
答案 1 :(得分:0)
您在
中加入\n
的文字
var textToSave =
document.getElementById('input1').value + '\n' +
document.getElementById('input2').value + '\n' +
document.getElementById('input3').value
所以只需用.split('\n')
function receivedText() {
var data = fr.result.split('\n');
document.getElementById("input1").value = data[0];
document.getElementById("input2").value = data[1];
document.getElementById("input3").value = data[2];
}
演示
(function() {
var input = document.getElementById("fileinput");
input.addEventListener("change", loadFile, false);
function loadFile() {
var file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText() {
var data = fr.result.split('\n');
document.getElementById("input1").value = data[0];
document.getElementById("input2").value = data[1];
document.getElementById("input3").value = data[2];
}
}
})();
function saveFormAsTextFile()
// Based on https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
{
var textToSave =
document.getElementById('input1').value + '\n' +
document.getElementById('input2').value + '\n' +
document.getElementById('input3').value
var textToSaveAsBlob = new Blob([textToSave], {
type: "text/plain"
});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("input1").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);
}
&#13;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<button onclick="saveFormAsTextFile()">Save</button></strong>
<form name="mainForm" method="get" id="Main">
<p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
<p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
<p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
<p>
<div>
<label for="file">Choose file to upload</label>
<input type="file" id='fileinput' accept=".txt">
</div>
</form>
</body>
</html>
&#13;
旁注:代码中的文件上传在Safari中无效