Blob存储上传+阿贾克斯/另类 [英] Blobstore upload + Ajax/Alternative

问题描述

下面code完美的作品。我唯一​​担心的是，我想下面转换为AJAX /替代，所以它不需要刷新整个页面提交申请。

如果可能，还包括加载进度条等。

 ＆LT;形式的行动={{UPLOAD_URL}}方法=POSTENCTYPE =的multipart / form-data的＆GT;

        上传文件：其中;输入类型=文件名称=文件＆GT; ＆LT; BR＆GT;
        ＆LT;输入类型=提交名称=提交值=提交＆GT;

        ＆LT;输入类型=隐藏名称=数据1值={{数据1}}＆GT;
        ＆LT;输入类型=隐藏名称=数据1值={{数据2}}＆GT;

＆LT; /形式GT;
 

解决方案

看看一些JS的解决方案AJAX上传 - 具体而言，Plupload可以挂接与App Engine的Blob存储工作，给你multiupload支持，AJAX上传，并选择上传控件/进度条/等。

事实上， @NickJohnson 有一个完整的<一个href="http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support"相对=nofollow>博客帖子指导您完成这些步骤。

它的要点是：

1）下载并安装 Plupload

2）创建一个处理程序，返回生成上传的URL。事情是这样的：

 从google.appengine.ext进口的webapp
从google.appengine.api进口Blob存储

类BlobstoreURLResponder（webapp.RequestHandler）：

    映射到URL / get_upload_url

    DEF得到（个体经营）：
        self.response.headers ['的Content-Type] ='text / plain的
        self.request.out.write（blobstore.create_upload_url（'/ Blob存储/直通'））
 

3）胡克Plupload上传文件之前得到一个blob上传网址

  uploader.bind（UploadFile，功能（上，文件）{
    $阿贾克斯（{
        网址：'/ get_upload_url，
        异步：假的，
        成功：功能（数据）{
          up.settings.url =数据;
        }，
    }）;
 

有关更详细的说明，看看该博客文章。尼克有一个真棒的演练，肯定是帮助我得到建立与Plupload + Blob存储区。

The following code works perfectly. My only concern is that I wanna convert below to AJAX/alternative, so that it doesn't need to refresh the whole page to submit this request.

If possible, to also include loading progress bar etc.

<form action="{{ upload_url }}" method="POST" enctype="multipart/form-data">

        Upload File: <input type="file" name="file"> <br> 
        <input type="submit" name="submit" value="Submit"> 

        <input type="hidden" name="data1" value="{{ data1 }}">
        <input type="hidden" name="data1" value="{{ data2 }}">

</form>

解决方案

Take a look at some JS solutions for AJAX upload - specifically, Plupload can be hooked up to work with the App Engine blobstore, giving you multiupload support, AJAX upload, and options for upload widgets/progress bars/etc.

In fact, @NickJohnson has a full blog post guiding you through the steps.

The gist of it is:

1) Download and install Plupload

2) Create a handler that returns a generated upload URL. Something like this:

from google.appengine.ext import webapp
from google.appengine.api import blobstore

class BlobstoreURLResponder(webapp.RequestHandler):

    """ Mapped to the URL /get_upload_url """

    def get(self):
        self.response.headers['Content-Type'] = 'text/plain'
        self.request.out.write(blobstore.create_upload_url('/blobstore/passthrough'))

3) Hook up Plupload to get a blob upload URL before uploading a file

uploader.bind('UploadFile', function(up, file) {
    $.ajax({
        url: '/get_upload_url',
        async: false,
        success: function(data) {
          up.settings.url = data;
        },
    });

For more detailed instructions, take a look at that blog post. Nick has an awesome walkthrough that definitely helped me get set up with Plupload + Blobstore.

这篇关于Blob存储上传+阿贾克斯/另类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！