Загрузка в интернет-магазин + Ajax / Alternative

Question

Следующий код работает отлично.Меня беспокоит только то, что я хочу преобразовать ниже в AJAX / альтернативу, чтобы не нужно было обновлять всю страницу, чтобы отправить этот запрос.

Если возможно, также включить индикатор загрузки и т. Д.

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

Answer 1

Взгляните на некоторые JS-решения для загрузки AJAX - в частности, Plupload можно подключить к работе с BLOB-магазином App Engine, предоставляя поддержку мультизагрузки, загрузку AJAX и опции для загрузки виджетов / индикаторов выполнения / т. Д.

На самом деле, @ NickJohnson имеет полное сообщение в блоге , которое проведет вас по шагам.

Суть этого:

1) Загрузите и установите Plupload

2) Создайте обработчик, который возвращает сгенерированный URL для загрузки.Примерно так:

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) Подключите Plupload, чтобы получить URL для загрузки BLOB-объектов перед загрузкой файла

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

Для получения более подробных инструкций ознакомьтесь с этой записью в блоге.У Ника есть потрясающее прохождение, которое определенно помогло мне настроить Plupload + Blobstore.