如何ajax上传网址并仍然获得blobstore识别的文件上传答案

【问题标题】：how to ajax the upload url and still get the file upload recognized by blobstore如何ajax上传网址并仍然获得blobstore识别的文件上传
【发布时间】：2013-05-21 18:14:33
【问题描述】：

class PhotoUploadFormHandler(webapp2.RequestHandler):
    def get(self):
#        upload_url = blobstore.create_upload_url('/upload_photo')
    # The method must be "POST" and enctype must be set to "multipart/form-data".
    self.response.out.write('''<html><body>  
    <form id="imgform" action="none" method="POST" enctype="multipart/form-data">
    Name: <input type="text" name="name"/  value="{{ user.name }}" > <br/> 
    Upload File : <input type="file" name="file1"><br> 
    <h7 id="create_upload_url">
    </h7>
    <input type="button"  id="submitbutton"  value="Submit"> 

    </form>
    <div id="output"></div>
    </body>
    <script type="text/javascript" src="js/zepto.js" > </script>
    <script type="text/javascript">

        // $('#submitbutton').submit( function(){
        $('#submitbutton').live("click",function(){
        console.log("submitbutton");
            // $('#upload_file').submit();   
            $('#create_upload_url').load('/create_upload_url', function() {
                var create_upload_url=$('#create_upload_url').text();
                $('#imgform').attr('action', create_upload_url); 
                // We serialize the post form, this grabs all the post values in the form.
                var info = $(this).closest('form').serialize(); 
                console.log(info);
                console.log(create_upload_url);
                $.post(create_upload_url, info, function(data) {
                        // We now pop the output inside the #output DIV.
                        $("#output").html(data);
                    });

              console.log('Load was performed.'+ create_upload_url );return true;

            });
        });
    </script>
    </html>
    ''')

我从一个上传 url 来自应用程序的工作表单开始

但是这与返回按钮有问题

然后我尝试像上面那样使用 ajax 动态获取 url

虽然我得到了典型的 url 并重定向 get_uploads 函数现在返回 0

这是一个正确的方法吗？

【问题讨论】：

标签： jquery ajax google-app-engine blobstore

【解决方案1】：

问题来了

var info = $(this).closest('form').serialize();

将表单数据序列化但不包含文件，因此您成功提交表单，但没有文件上传。

通常您需要发出表单提交来上传文件。你不能用一个简单的 AJAX 帖子来做到这一点。

有一些解决方法涉及创建单独的 iframe 并为 iframe 发出表单提交，这样您的主框架就不会更新。如果你谷歌“jquery ajax 文件上传”，有多种解决方案。

这里有一个简单的教程：http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

【讨论】：