Как открыть поток файлов в JavaScript?

Question

Чтобы привести конкретный пример того, что я имею в виду:

Представьте, что у меня есть HTML-страница, которая выглядит следующим образом

<div>
   <div id="filecontents">
       <!-- some html file contents -->
   </div>
   <input type="button" />
</div>

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

Это вообще возможно?

Цель этого заключается в том, чтобы я смог открыть HTML, текст или файл CSV, используя содержимое div в качестве источника данных для файла.

Answer 1

Вы можете сделать это с помощью API файловой системы HTML5. Пара обучающих программ здесь:

• Чтение локальных файлов в JavaScript
• Изучение API файловой системы

Поддержка браузеров сейчас слабая, но я предполагаю, что она ближе всего к тому, что вы хотите.

Answer 2

Не <input type="file" /> сделать это точно?

Answer 3

Я не понимаю все эти ответы, которые говорят, что это невозможно без плагина. Я бы сказал, что это абсолютно возможно при использовании стандартных веб-технологий, но требует взаимодействия с пользователем и взаимодействия с сервером. Конечно, вы не можете читать или писать что-либо на компьютере пользователя из Интернета, но вы можете попросить пользователя предоставить файл (открыть) и дать пользователю файл (сохранить).

Чтобы открыть файл с помощью JavaScript, используйте <input type="file" />, Если вы хотите, вы можете использовать JavaScript для отображения открытого диалога, вызвав click() метод ввода файла (метод DOM, а не метод jQuery). в onchange обработчик, отправьте форму, прочитайте загруженный файл и запишите содержимое на свою страницу.

Чтобы сохранить файл с помощью JavaScript, отправьте его содержимое на сервер, подготовьте файл и отправьте его обратно клиенту с помощью content-disposition заголовок attachment; filename="file.txt", Этот заголовок вызывает загрузку файла и сохранение компьютера пользователя, а не его отображение в браузере.

Сделайте это, и вы официально написали свое первое приложение для облачных вычислений!

Answer 4

<input type="file" /> позволит вам загрузить файл на сервер, но у вас нет прямого доступа к этому файлу или к локальной файловой системе из javascript - это функция безопасности.

Если вы хотите каким-либо образом изменить страницу, основываясь на содержимом файла, вам придется выполнить обратную передачу: загрузить файл на сервер, затем отобразить новую страницу с необходимыми изменениями и отправить ее обратно в клиент.

Я видел некоторый файлово-подобный код, написанный для javascript (то есть, для флеш-реализации), но они должны "загружать" файлы с помощью ajax-запроса и затем читать данные в виде строки javascript.

Answer 5

Вы не можете получить доступ к локальной файловой системе из JavaScript из-за соображений безопасности. Однако вы можете получать файлы с помощью перетаскивания в современных браузерах или использовать Java-апплет, который взаимодействует с вашим JavaScript.

РЕДАКТИРОВАТЬ: забыл о новом файле HTML5 API, связанном с Майклом Миором. Идите с его ответом, он человек. Если вам нужна кросс-браузерная поддержка, используйте java-апплет, это больно, но работает.

Answer 6

Не с чистым JavaScript. Вы не можете открыть диалоговое окно файла, чтобы сохранить часть HTML, например. Даже если бы вы могли, нет никакого способа открыть локальный файл с помощью JavaScript по соображениям безопасности (в противном случае вредоносные веб-сайты могут украсть все ваши данные).

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

Answer 7

Используйте этот скрипт и поместите его в кнопку, которую должен отображать браузер файлов.

function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function(theFile) {
                return function(e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '"
                        title = "', escape(theFile.name), '" / > '].join('
                        ');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f); reader.readAsDataURL(f);
        }
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);