在webpy中获取上传状态

Question

我正在为我的项目制作一个上传工具，我想避免使用任何基于Flash的解决方案（我不太喜欢Flash，而且我希望支持移动平台）。整个过程看起来很简单：我有一个表单，还有一个漂亮的jQuery进度条，我可以通过脚本发送ajax请求并设置超时来更新进度条的状态……如果我按照Webpy的食谱来做，唯一我不明白的是如何从服务器接收信息：已经写入了多少字节/块/其他数据？

Answer 1

你可以使用 FormData 在现代浏览器中创建一个 ajax 上传器。

$.fn.uploader = function( options ) {
    var defaults = {},
        opts = $.extend( defaults, options ),
        that = $( this ),
        url = that.data( "upload_url" ),
        is_uploading = false;

    function upload( files ) {

        $.get( "/file/blank.html" );

        if ( FormData === undefined ) {
            alert( "Your browser does not support standard HTML5 Drag and Drop" );
            return;
        }        

        var xhr = new XMLHttpRequest(),
            new_element = $( "<li><p>Loading</p><span></span></li>" )
                .appendTo( that ),
            xhr_upload = xhr.upload,
            form = new FormData();

        xhr_upload.addEventListener( "progress", function( e ) {
            if( e.lengthComputable ) {
                var p = Math.round( e.loaded * 100 / e.total );
                new_element.children( "span" ).text( e.loaded == e.total ? "Processing..." : p + "%" );
            }
        }, false);
        xhr_upload.addEventListener( "load", function( e ){}, false);
        xhr_upload.addEventListener( "error", function( error ) { alert( "error: " + error ); }, false);

        xhr.open( "POST", url, true );
        xhr.setRequestHeader( "X-Requested-With", "XMLHttpRequest" );

        xhr.onreadystatechange = function ( e ) {
            if ( xhr.readyState == 4 ) {
                is_uploading = false;
                if( xhr.status == 200 ) {
                    var data = $.parseJSON( e.target.responseText );
                    if ( data.status == 0 ) {
                        new_element
                            .fadeOut(function (){ $( this ).remove(); })
                            .children( "span" ).text( "Upload error!" );
                    } else {
                        that.html( data.html );
                    }
                } else {
                    new_element
                        .fadeOut(function (){ $( this ).remove(); })
                        .children( "span" ).text( "Upload error!" );
                }
            }
        };
        $.each( files, function() {
            form.append( "files", this );
        });
        is_uploading = true;
        xhr.send( form );
    }

    that.bind({
        "dragover": function( e ) {
            var dt = e.originalEvent.dataTransfer;
            if( !dt || is_uploading ) { return; };
            if( $.browser.webkit ) { dt.dropEffect = "copy"; };
            $( this ).addClass( "active" );
            return false;
        },
        "dragleave": function( e ) {
            $( this ).removeClass( "active" );
        },
        "dragenter": function( e ){ return false; },
        "drop": function( e ){
            var dt = e.originalEvent.dataTransfer;
            $( this ).removeClass( "active" );
            if( !dt || !dt.files || is_uploading ) { return; };
            upload( dt.files );
            return false;
        }
    });

    $( document ).bind({
        'dragenter': function( e ) { return false; },
        'dragleave': function( e ) { return false; },
        'dragover': function( e ) {
            var dt = e.originalEvent.dataTransfer;
            if ( !dt ) { return; }
            dt.dropEffect = "none";
            return false;
        }
    });

};

在服务器端，我是这样处理的：

def POST(self):
    i = web.webapi.rawinput()
    try:
        files = i.files
        if not isinstance(files, list):
            files = [files]
        for f in files:
            if f.filename:
                filetype, encoding = mimetypes.guess_type(f.filename)
                # do smth with f.file
    except KeyError:
        pass
    if web.ctx.env.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
        web.header("Content-Type", "application/json")
        return json.dumps(dict(status=1, html=unicode(render_partial.files(uploaded_files))))
    else:
        raise web.seeother(web.ctx.env.get("HTTP_REFERER", "/"))

另外，你也可以看看 nginx 上传进度 模块或者 apache2 上传进度模块，uWSGI 也有这个功能。