使用JavaScript上传Blobstore

Question

这是一个最简单的HTML声明，用于在upload_url中上传文件到Blobstore。使用这个方法时，需要点击提交按钮才能把内容提交上去，并且会被重定向到另一个页面。那我该如何用JavaScript或jQuery在后台发送这个请求，而不丢失enctype呢？

<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
    <input type="file" name="file">
    <input type="submit" name="submit" value="Submit">
</form>

Answer 1

jQuery表单插件可以让你在后台使用Ajax提交多部分表单，也就是说，你可以在不刷新页面的情况下发送表单数据。

下面是一个例子：

$('#upload_file').submit(function() { 
    var options = { 
        clearForm: true        // clear all form fields after successful submit 
    }; 
    $(this).ajaxSubmit(options);
    return false; 
});

$('[name=submit]').click(function(){
    $('#upload_file').submit();        
});

要让这个功能在后台悄悄运行，你需要把原来的“提交”按钮换成一个“按钮”输入：

<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
        <input type="file" name="file">
        <input type="button" name="submit" value="Submit">
</form>