Как разрешить пользователю загружать файл на мой сайт, редактировать его и сохранять обратно

Question

У меня очень простое веб-приложение, которое я создаю. нет php - просто html & javascript.

Я хочу получить этот вариант использования для пользователя, который заходит на мой сайт:

1. пользователь выберет текстовый файл со своего компьютера, например: c: \ directory \ file.txt
2. он откроет этот файл на моей веб-странице (нужно ли для этого использовать php? Чтобы загрузить файл на сервер и затем отобразить его на моем веб-сайте? Если я не хочу, чтобы данные на моем сервере - просто позвольте пользователю редактировать его - могу ли я просто выполнить все эти действия с помощью js на стороне клиента?)
3. он отредактирует часть текста
4. он нажмет кнопку «сохранить» или «сохранить как», и он автоматически сохранит свой файл на своем компьютере.

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

спасибо, Alon

p.s поиск в сети «загрузки файлов» дал мне много результатов о том, как загружать файлы на ftp - мой вопрос не об этом.

Answer 1

То, что вы, похоже, запрашиваете, обычно требует серверного кода, такого как php.

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

// Returns null if it can't do it, false if there's an error, true if it saved OK
function mozillaSaveFile(filePath,content)
{
    if(window.Components) {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
            file.initWithPath(filePath);
            if(!file.exists())
                file.create(0,0x01B4);// 0x01B4 = 0664
            var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
            out.init(file,0x22,0x04,null);
            out.write(content,content.length);
            out.flush();
            out.close();
            return true;
        } catch(ex) {
            return false;
        }
    }
    return null;
}

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