2011-10-24 101 views
1

我想使用JQuery File UPload插件(請參閱https://github.com/blueimp/jQuery-File-Upload/wiki)添加可視化拖放上傳功能到我的基於GAE的網站。雖然沒有對主題(https://github.com/blueimp/jQuery-File-Upload/wiki/Google-App-Engine)一個文檔頁面,它達不到顯示的全過程,並不管我多麼搏鬥這個局面,我不能讓它開始工作。接線jquery文件上傳到谷歌應用程序引擎

我的出發點是一個簡單的單文件圖片上傳至其重定向到的圖像列表Blob存儲區:

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可以提供一個解釋或完整的例子嗎?

回答

1

upload_url_2看起來應該對應於create_upload_url()

upload_url_1看起來像在文件被上傳之前選擇文件時它將被作爲回調調用。如果你實際上並沒有試圖完成某件事,那麼你可能會忽略它。你有沒有嘗試初始化它沒有add回調,只是$('#fileupload').fileupload();

+0

這是我嘗試過的排列之一,但它不起作用 – sagism

相關問題