我没有上传附件以使浏览器正常工作。
这里有一些提示,那里有一些提示。文档非常好,但我无法将其转换为 AJAX 上传。
我正在寻找一个超级简单的 HTML/JavaScript 示例(带或不带 jQuery),说明如何在不使用 jquery.couch.app.js 包装器或其他东西的情况下将文件从(相对现代的)浏览器上传到数据库。越简单越好。
任何帮助表示赞赏。
好的,这是您的纯 JavaScript 文件上传实现。
基本算法是这样的:
HTML 部分基本上由一个简单的表单组成,它有两个元素,一个 type 的输入file
和一个 type 的按钮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 请求标头中使用正确的内容类型。
注意:我很清楚我在这里根本没有使用防御性编程,我故意这样做是为了简洁。