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

发布于 2024-12-12 02:30:13 字数 2948 浏览 0 评论 0 原文

我正在尝试使用 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)

现在图像插件在客户端有两个部分，可能需要自定义：这个：

<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 的经验的人都可以提供解释或完整的示例吗？

原文

I'm trying to add visual drag-and-drop upload capabilities to my GAE-based site using the JQuery File UPload plugin ( see https://github.com/blueimp/jQuery-File-Upload/wiki ). While there is a documentation page on the topic ( https://github.com/blueimp/jQuery-File-Upload/wiki/Google-App-Engine ), it falls short of showing the whole process and no matter how much I wrestle this around I cannot get it to work.

My starting point is a simple single file image upload to the blobstore which redirects to a list of images:

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)

Now the Image Plugin has two parts on the client-side which may require customization:
This one:

<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>

and the upload form:

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

After wrangling with this for a day, I cannot figure out what is the role of each one of those urls ({{upload_url_1}} and {{upload_url_2}} in that last snippet).

I have tried hooking one of them to a handler which handles the uploads and returns json with the results, and hook the other one to the handler which allocates the upload url (using create_upload_url()) but any permutation of this type of wiring failed.

Can anyone with experience wiring jquery image upload into GAE python can provide an explanation or a full example?

分享到QQ

分享到微博