如何从浏览器上传文件（附件）？

我无法上传附件以使浏览器正常工作。

一些提示是here http://japhr.blogspot.de/2010/02/how-to-upload-files-in-couchapp.html， 其他的there http://comments.gmane.org/gmane.comp.db.couchdb.couchapp.general/1376. The docs http://wiki.apache.org/couchdb/HTTP_Document_API#Attachments非常好，但我无法将其转换为 AJAX 上传。

我正在寻找一个超级简单的 HTML/JavaScript 示例（带或不带 jQuery），说明如何将文件从（相对现代的）浏览器上传到数据库without使用 jquery.couch.app.js 包装器或其他东西。越简单越好。

任何帮助表示赞赏。

好的，这是您的纯 JavaScript 文件上传实现。

基本算法是这样的：

1. 从文件输入元素获取文件
2. 获取文件名并键入文件对象
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。

在该事件处理程序中，我使用两个参数调用主函数。第一个是文档名称，第二个是要上传的文件。

In my uploadFile()函数我设置文件名、文件类型并获取一些实例。第一个 HTTP 请求是 GET 请求，用于获取文档的当前修订版本。如果该请求成功，我会通过设置先前获得的修订版、正确的内容类型来准备 PUT 请求（实际的上传请求），然后将文件转换为 ArrayBuffer。完成后，我只需发送刚刚准备好的 HTTP 请求，然后就可以放松了。

独立附件上传方案如下所示：

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

当然，在 HTTP 请求标头中使用正确的内容类型。

注意：我很清楚我在这里根本没有使用防御性编程，我是为了简洁而故意这样做的。