多部分表单,文件输入JQuery Mobile

时间:2013-05-14 23:00:17

标签: html5 google-app-engine google-cloud-datastore blobstore jquery-mobile

我正在尝试创建一个JQuery Mobile页面,将视频上传到Google App Engine Blobstore以及相关的标题,说明等。

这是表单的HTML。

<form class="form-horizontal" action="{{ upload_url }}" method="POST" enctype="multipart/form-data" data-ajax="false">
  <input type="text" name="title" placeholder="Title" id="basic" value="" data-ajax="false" />
  <input type="text" name="description" placeholder="Description" id="basic" value="" data-ajax="false" />
  <input type="file" data-ajax="false" name="file" id="file">
  <input type="submit" value="Submit" name="sumbit" data-theme="b" data-ajax="false">
</form>

使用此代码在Google App Engine中生成HTML。

class MobileUploadPage(webapp2.RequestHandler):
  def get(self):
    upload_url = blobstore.create_upload_url('/uploadvideo')
    template_values = {
      'upload_url': upload_url,
    }

    template = JINJA_ENVIRONMENT.get_template('mobileUpload.html')
    self.response.write(template.render(template_values)) 

您看到的表单操作的上传URL由blobstore使用以下处理程序生成。

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
  def post(self):
  upload = self.get_uploads()[0]
  video = Videos(content=upload.key())
  video.title = self.request.get('title')
  video.description = self.request.get('description')
  video.ratingDown = 0
  video.ratingUp = 0
  video.creator = users.get_current_user().nickname()
  uniuqeIDFound = False
  newID = random.randint(1000,9999)
  while(uniuqeIDFound == False):
    vids = db.GqlQuery("SELECT * "
                       "FROM Videos ")

    uniuqeIDFound = True
    for v in vids:
      if (v.videoID == newID):
        newID = random.randint(1,10000)
        uniuqeIDFound = False
  video.videoID = newID
  db.put(video)
  self.redirect('/home')

上传网址已正确生成并显示在页面上。在我们网站的浏览器版本上,它完美无缺。但是,当尝试通过此JQM移动页面将视频从iPhone上传到blobstore时,表单不会提交。

在JQM文档中,它表示带有文件的多部分表单输入不适用于AJAX,因此您应该将data-ajax = false标记添加到父表单。我已经这样做但似乎没有帮助。

谁能明白为什么?

1 个答案:

答案 0 :(得分:0)

你试过了吗?

$.mobile.ajaxEnabled = false;

$.mobile.ajaxFormsEnabled = false;

您还可以查看特定的文件上传插件:

http://www.plupload.com/example_queuewidget.php

https://github.com/filamentgroup/jQuery-Custom-File-Input