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

我从一个工作表单开始，其中上传网址来自应用

然而这有后退按钮的问题

然后我尝试使用ajax

动态获取url

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

这是一种正确的方法吗？

Answer 1

问题出在这里

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

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

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

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

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

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

1 个答案: