Ответ 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-запроса.
Примечание. Я хорошо знаю, что здесь я вообще не использую защитное программирование, я сделал это специально для краткости.