Question

这个tutorial解释了如何上传带有瓶子和普通HTML表单的文件。但是如何使用jquery AJAX调用将文件上传到服务器？

HTML

<form id="uploadForm">
file: <input id="fileData" type="file" name="upload" />
<input type="submit" value="Start upload" />
</form>

的jQuery

$("#uploadForm").submit(function(event) {
    event.preventDefault();
    $.ajax(
        {
            Type: "POST",
            contentType: false,
            url: "../upload",
            data: //What do i pass here?,
            success: function (data) {
                alert(data);
            }
        });
})

Python Bottle

@app.route('/upload', method='POST')
def do_upload():
    upload = bottle.request.files.query('upload')
    sys.stdout.write(bottle.request.files.get('upload').filename);
    name, ext = os.path.splitext(upload.filename)
    inputfile = open('/srv/http/params/%s'%upload.filename, 'wb')
    inputfile.write(upload.file.read())
    inputfile.close()
    return 'OK'

我主要关注应该传递给AJAX调用的数据，以及之后如何在Bottle的一侧检索这些数据。

Answer 1

对于支持的浏览器，您传递一个formData对象，因为您无法直接从输入值上传文件：

$("#uploadForm").submit(function(event) {
    event.preventDefault();
    var data = new formData(this);
    $.ajax({
        type        : "POST",
        url         : "../upload",
        data        : data,
        contentType : false,
        processData : false
    }).done(function (data) {
        alert(data);
    });
});

对于非支持浏览器，您需要以某种方式通过iFrame提交表单

使用AJAX使用Bottle上传文件

1 个答案: