Question

我正在尝试使用JQuery File UPload插件向我的基于GAE的站点添加可视化拖放上传功能（请参阅https://github.com/blueimp/jQuery-File-Upload/wiki）。虽然有关于该主题的文档页面（https://github.com/blueimp/jQuery-File-Upload/wiki/Google-App-Engine），但它无法显示整个过程，无论我多么努力，我无法让它发挥作用。

我的出发点是将简单的单个文件图像上传到blobstore，然后重定向到图像列表：

class Pic(db.Model):
    blob_key = blobstore.BlobReferenceProperty()
    url = db.StringProperty(required=True)
    creation = db.DateTimeProperty(auto_now_add=True)

class PicUploadForm_Handler(webapp.RequestHandler):
    def get(self):
        upload_url = blobstore.create_upload_url('/upload_pic/')
        self.response.out.write('<html><body>')
        self.response.out.write('<form action="%s" method="POST" enctype="multipart/form-data">' % upload_url)
        self.response.out.write("""Upload File: <input type="file" name="file"><br> <input type="submit" 
        name="submit" value="Submit"> </form></body></html>""")

class PicUpload_Handler(blobstore_handlers.BlobstoreUploadHandler):
    def post(self):
        upload_files = self.get_uploads('file')  # 'file' is file upload field in the form
        blob_info = upload_files[0]
        pic = Pic(
            blob_key=blob_info.key(),
            url=images.get_serving_url(blob_info.key()))
        pic.put()
        self.redirect('/pics/list/')

class List_Pics(webapp.RequestHandler):
    def get(self):
        pics = Pic.all()
        pics.order("-creation")
        results = pics.fetch(5)
        html_str = '<html><body>'
        for pic in results:
            html_str += '<div><a href="%s"><img src="%s"/></a></div>'%(pic.url, pic.url+'=s100')
        html_str += '</body></html>'
        self.response.out.write(html_str)

现在，Image Plugin在客户端有两个部分，可能需要自定义：这一个：

<script>
$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('{{upload_url_1}}', function (url) {
            data.url = url;
            $.blueimpUI.fileupload.prototype
                .options.add.call(that, e, data);
        });
    }
});
</script>

和上传表单：

<form action="{{upload_url_2}}" method="POST" enctype="multipart/form-data">
    <div class="fileupload-buttonbar">
        <label class="fileinput-button">
            <span>Add files...</span>
...

在与此争吵一天后，我无法弄清楚每个网址（{{upload_url_1}}和{{upload_url_2}}在最后一个代码段中的作用）。

我已经尝试将其中一个挂钩到一个处理上传的处理程序并返回带有结果的json，并将另一个挂钩到处理程序，该处理程序分配上传URL（使用create_upload_url()）但是这个的任何排列接线类型失败。

任何有经验将jquery图像上传到GAE python的人都可以提供解释或完整的例子吗？

Answer 1

upload_url_2看起来应与create_upload_url()对应。

upload_url_1看起来在上传之前，在选择文件时会将其作为回调调用。如果你实际上没有尝试在这里完成某些事情，你可以省略它。您是否尝试在没有add回调的情况下初始化它，只需$('#fileupload').fileupload();？

将jquery文件上传到谷歌应用引擎

1 个答案: