表单提交前生成上传url答案

【问题标题】：Generate upload url before form submission表单提交前生成上传url
【发布时间】：2014-08-31 09:59:24
【问题描述】：

我正在尝试通过在文件上传之前而不是在呈现表单时延迟它们的生成来解决过期的上传 url。我发现的一个解决方案是在表单提交或按钮单击事件上执行此操作，如下所示：

$('#btn-upload').click(function(event){
  event.preventDefault();

  var uploadUrl = '';
  $.get( "/generate_upload_url", function(data) {
    uploadUrl = data;
  });

  $('#my-form').attr('action', uploadUrl);
});

在服务器端，我有一个 Handler 可以生成上传网址，如下所示：

class GenerateUploadUrlHandler(BaseHandler):
    def get(self):
        upload_url = blobstore.create_upload_url('/upload')
        self.response.headers['Content-Type'] = 'text/plain'
        self.response.out.write(upload_url)

我希望当我单击按钮生成新的上传 url 并在那里发出 POST 请求时，但会发生什么是表单的操作充满了延迟，并且 POST 请求是针对错误的 URL 完成的。我怀疑这可能是因为我正在执行异步 GET 请求并且我的表单同时提交，但我不确定，因为我在这里看到了类似的示例： http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support

【问题讨论】：

我看到你在使用event.preventDefault(); 它会阻止你的表单在点击提交按钮时被提交。您确定正在调用 click 事件吗？
是的，需要preventDefault()，因为我通过其他地方的文件上传接口提交表单。

标签： javascript jquery python google-app-engine blobstore

【解决方案1】：

我不太喜欢在使用 ajax 时将 async 设置为 false。如果服务器没有响应，它可以完全杀死你的页面。

您可以尝试使用表单提交事件而不是按钮单击事件绑定您的事件处理程序。并在ajax调用成功事件中设置表单的action属性，然后触发表单的提交事件

$('#my-form').submit(function(event){
  event.preventDefault();

  var uploadUrl = '';
  $.get( "/generate_upload_url", function(data) {
    uploadUrl = data;
    $('#my-form').attr('action', uploadUrl);
    $('#my-form').trigger("submit");
  });


});

【讨论】：

【解决方案2】：

尝试两件事：

1) 将您的$('#my-form').attr('action', uploadUrl); 放在上面的$.get()' 成功回调中。

2) 如果这不起作用，请从$.get() 切换到$.ajax()，并将async 设置为false。

【讨论】：

【解决方案3】：

我通过将$.get() 更改为$.ajax({async:false}) 解决了这个问题，所以我想我不应该通过异步请求来解决它。

【讨论】：

这不是一个现实的解决方案。你真的应该永远不要在网络工作者之外使用同步 ajax 请求。这样做可以很容易地将 UI 线程锁定很长一段时间。看看这里提供的其他一些解决方案。
有道理。谢谢。我回答的太快了，没有看到其他答案。