Как загрузить файл (приложение) из браузера?

Я не получаю загрузку приложения для работы браузера.

Некоторые подсказки здесь, другие там. Документы неплохие, но я не могу перевести это на загрузку AJAX.

Я ищу супер простой пример HTML/JavaScript (с или без jQuery) о том, как загрузить файл из (относительно современного) браузера в db без, используя jquery.couch.app.js обертка или прочее. Чем проще besser.

Любая помощь оценивается.

Ответ 1

Хорошо, вот ваша реализация загрузки файла в формате JavaScript.

Основной алгоритм выглядит следующим образом:

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

Часть HTML в основном состоит из простой формы с двумя элементами, ввода типа file и кнопки типа submit.

<form action="/" method="post" name="upload">
  <input type="file" name="file" />
  <button type="submit" name="submit">Upload</button>
</form>

Теперь к части JavaScript.

window.onload = function() {
    var app = function() {
        var baseUrl = 'http://127.0.0.1:5984/playground/';
        var fileInput = document.forms['upload'].elements['file'];
        document.forms['upload'].onsubmit = function() {
            uploadFile('foo', fileInput.files[0]);
            return false;
        };

        var uploadFile = function(docName, file) {
            var name = encodeURIComponent(file.name),
            type = file.type,
            fileReader = new FileReader(),
            getRequest = new XMLHttpRequest(),
            putRequest = new XMLHttpRequest();

            getRequest.open('GET',  baseUrl + encodeURIComponent(docName),
                true);
            getRequest.send();
            getRequest.onreadystatechange = function(response) {
                if (getRequest.readyState == 4 && getRequest.status == 200) {
                    var doc = JSON.parse(getRequest.responseText);
                    putRequest.open('PUT', baseUrl +
                        encodeURIComponent(docName) + '/' +
                        name + '?rev=' + doc._rev, true);
                    putRequest.setRequestHeader('Content-Type', type);
                    fileReader.readAsArrayBuffer(file);
                    fileReader.onload = function (readerEvent) {
                        putRequest.send(readerEvent.target.result);
                    };
                    putRequest.onreadystatechange = function(response) {
                        if (putRequest.readyState == 4) {
                            console.log(putRequest);
                        }
                    };
                }
            };
        };
    };
    app();
};

В основном, я перехватываю событие submit формы, связывая свою собственную функцию с событием формы onsubmit и возвращаю false.

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

В моей функции uploadFile() я устанавливаю имя файла, тип файла и захватываю некоторые экземпляры. Первый HTTP-запрос - это запрос GET для получения текущей версии документа. Если этот запрос завершается успешно, я готовлю запрос PUT (фактический запрос на загрузку), установив ранее полученную ревизию, правильный тип контента, а затем я конвертирую файл в ArrayBuffer. После этого я просто отправлю HTTP-запрос, который я только что подготовил, а затем я расслабляюсь.

Схема загрузки автономного приложения выглядит следующим образом:

PUT host/database/document/filename?revision=latest-revision

Конечно, используя правильный тип контента в заголовке HTTP-запроса.

Примечание. Я хорошо знаю, что здесь я вообще не использую защитное программирование, я сделал это специально для краткости.