Есть ли способ "загрузить", открыть TXT-файл в textarea и автоматически сохранить его при закрытии или изменении URL?

Есть ли способ "загрузить", открыть TXT-файл в textarea и автоматически сохранить его при закрытии или изменении URL?

Мне нужно это для автоматического открытия файла TXT и автоматического сохранения его при выходе из страницы или при закрытии браузера.

JavaScript:

/** ReLoad File BEGINS**/
function ReLoadFile()
{
    var FileToLoad = document.getElementById("FileToLoad").files[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("text").value = textFromFileLoaded;
    };
    fileReader.readAsText(FileToLoad, "UTF-8");
}
/** ReLoad File ENDS**/

/** Save File As FUNC p-1 BEGINS **/
var types = [
  {"extension": ".html", "name": "HTML"},
  {"extension": ".txt", "name": "Plain Text"},
  {"extension": ".js", "name": "Javascript"},
  {"extension": ".css", "name": "CSS"},
]
types.forEach(function(type) {
  $opt = $("<option>").attr("value", type.extension).text(type.name)
  $("#saveas").append($opt)
})

/** Save return if empty BEGINS**/
function SaveAsType()
{
    if (document.getElementById("FileNameToSaveAs").value == "") {
         alert("``Filename Save As`` name is empty.\n       Please give the file a name that you will save it as, before you save it.");
         return false;
    } else {
/** Save File As FUNC p-2 BEGINS **/
    {
    console.log($("#saveas").val())

        {
        var textToSave = document.getElementById("text").value;
        var textToSaveAsBlob = new Blob([textToSave],     {type:"text/plain"    });
        var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
        var fileNameToSaveAs = document.getElementById("FileNameToSaveAs").value + "" + $("#saveas").val();

        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();
        }

    }
/** Save File As FUNC p-2 ENDS **/
    }
}
/** Save return if empty ENDS**/
/** Save File As FUNC p-1 ENDS **/

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
/** Save File As ENDS **/

HTML:

<input type="file" id="FileToLoad" name="fileLoadName">
<input type="button" onclick="ReLoadFile();" value=" Re-Load ">
<textarea name="text" id="text" rows="34" cols="134" wrap="soft" placeholder="STEP - 1 : Put or load your web page Source Codes here"></textarea>
<textarea id="FileNameToSaveAs" rows="1" cols="30" maxlength="40"  placeholder=" Filename Save As "></textarea>
<input type="button" onClick="SaveAsType();" value=" Save ">

1 ответ

Решение

Используя jquery, вы можете легко открыть авто:

$(document).ready(function() {
       // do what you want with the text file
});

Чтобы справиться с тем, когда браузер закрывается, вы можете использовать событие jquery unload(). Смотрите документацию здесь: https://api.jquery.com/unload/ Обратите внимание, что событие unload срабатывает, когда пользователь уходит со страницы. Следовательно, кнопки "Назад" и "Вперед", а также нажатие на ссылку будут вызывать это событие в дополнение к тому, что оно срабатывает при закрытии браузера.

Другие вопросы по тегам