Blob存储上传+阿贾克斯/另类 [英] Blobstore upload + Ajax/Alternative
问题描述
下面code完美的作品。我唯一担心的是,我想下面转换为AJAX /替代,所以它不需要刷新整个页面提交申请。
如果可能,还包括加载进度条等。
<形式的行动={{UPLOAD_URL}}方法=POSTENCTYPE =的multipart / form-data的>
上传文件:其中;输入类型=文件名称=文件> < BR>
<输入类型=提交名称=提交值=提交>
<输入类型=隐藏名称=数据1值={{数据1}}>
<输入类型=隐藏名称=数据1值={{数据2}}>
< /形式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屋!