如何ajax上传URL并仍然获得blobstore识别的文件上传

Question

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

i started with a working form where the upload url comes from the app 我从一个工作表单开始，其中上传网址来自该应用程序

however this has issues with the back button 但是这与后退按钮有关

then i tried getting the url dynamically as above with ajax 然后我尝试使用ajax像上面一样动态获取URL

although i do get the typical url and redirect the get_uploads function now returns 0 虽然我确实获得了典型的URL并重定向了get_uploads函数，但现在返回0

is this a correct approach ? 这是正确的方法吗？

Answer 1

The problem is here 问题在这里

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

That serializes the form data but does not include the file, so you successfully submit the form, but with no file upload. 这会序列化表单数据，但不包含文件，因此您可以成功提交表单，但不上传文件。

Usually you need to issue a form submit to upload a file. 通常，您需要发出表单提交来上传文件。 You can't do it with a simple AJAX post. 您不能通过简单的AJAX帖子来做到这一点。

There are workarounds which involve creating a separate iframe and issuing the form submit for the iframe, so that your main frame doesn't update. 有一些变通办法，其中包括创建单独的iframe并为iframe发布表单提交，这样您的主框架就不会更新。 There's multiple solutions if you google "jquery ajax file upload". 如果您用Google搜索“ jQuery ajax文件上传”，则有多种解决方案。

Here's a simple tutorial: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/ 这是一个简单的教程： http : //tutorialzine.com/2013/05/mini-ajax-file-upload-form/

如何ajax上传URL并仍然获得blobstore识别的文件上传

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-05-27 15:06:14

如何ajax上传URL并仍然获得blobstore识别的文件上传

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-05-27 15:06:14

解决方案1
1 已采纳 2013-05-27 15:06:14