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

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

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

Я ищу супер простой пример HTML / JavaScript (с или без jQuery) о том, как загрузить файл из (относительно современного) браузера в db без использование jquery.проращивать.приложение.в JS-wrapper или вещи. Чем проще Бессер.

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

10
couchdb

1 ответов

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

основной алгоритм выглядит так:

  1. получить файл из элемента ввода файла
  2. получить имя файла и введите off объекта file
  3. получите последнюю редакцию документа, к которому вы хотите прикрепить файл
  4. прикрепите файл к документу, используя извлеченную ревизию

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-запроса.

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

18