Можно ли изменить файл после того, как он уже был выбран в и еще читать ее текст? - PullRequest
0 голосов
/ 16 июня 2020

Я работаю над проектом, который требует отправки файлов через веб-страницу. Хотя в этом нет необходимости, пользователю удобно иметь возможность редактировать файл после того, как он уже был выбран. Однако я столкнулся с проблемой, что чтение FileReader возвращает null после внесения изменений и их последующего сохранения. Мой довольно простой код отладки приведен ниже.

<html>
<head>
</head>
<body>
<input type="file" id="file" value>
<button id="sub">Submit</button>
</body>
<script>
    document.getElementById("sub").addEventListener("click", function() {
        var reader = new FileReader();
        reader.addEventListener('loadend', function() {
            var src_code = this.result;
            console.log(src_code);
        });
        if (document.getElementById("file").files.length == 0) {
            //empty
            alert("empty");
        }
        else {
            console.log(document.getElementById("file").files[0]);
            reader.readAsText(document.getElementById("file").files[0]);
        }
    });
</script>
</html>

Я прочитал еще один вопрос здесь , в котором утверждается, что FileReader виноват в этом, но, к сожалению, мне абсолютно нужен текст в файле и ответ не предоставил альтернативы.

Есть ли способ получить текст из файла, который позволяет пользователю обновить файл после его выбора?

1 Ответ

2 голосов
/ 16 июня 2020

Нет, надежного способа не существует.

При выборе файла из браузер получает указатель на файл на диске вместе с некоторыми метаданными, предоставленными ОС. К счастью, он не сохраняет данные файла в памяти (в противном случае было бы довольно сложно загрузить файлы размером в несколько ГБ), и он также не блокирует файл на диске.

Таким образом, пользователь действительно может редактировать файл на диске и даже удалять его с диска. Однако большинство браузеров будут использовать метаданные, предоставленные ОС в момент их выбора, чтобы прочитать файл через FileReader.

Это означает, что если ваш файл был выбран размером 120 КБ, а затем отредактирован, чтобы сделать его файлом размером 100 КБ, браузер запросит данные, которых больше не существует, и читатель найдет sh.

Конечно, вы можете заставить браузер сохранять полные данные в памяти в момент их выбора, например,

blob = new Blob( [ await file.arrayBuffer() ], { type: file.type } );

здесь blob хранит в памяти данные, которые file указывал на момент его вызова.
Но blob больше не связан с файлом на диске, поэтому, если ваш пользователь отредактирует файл на диске, blob не будет изменен .

Обратите внимание, что Firefox на самом деле сможет обрабатывать отредактированные файлы с помощью методов Blob (arrayBuffer() и text()), по крайней мере, на macOS (я думаю, что ОС имеет значение здесь), но их FileReader по-прежнему будет вызывать ошибку. Chrome просто выкидывает в обоих случаях. Таким же образом, выборка файла через XHR или fetch приведет к добавлению Chrome (но не в FF, если файл был только отредактирован и все еще существует).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...