如何上传大文件AJAX + Web.py

时间:2013-11-21 17:20:23

标签: jquery ajax file-upload web.py

我在客户端使用web.py应用程序作为服务器和JQuery。应用程序的一部分需要上传文件,我在客户端使用它:

$('#filesend').click( function(){
    var xhr = new XMLHttpRequest();

    xhr.open( 'PUT', '/ajax/file', true );

    var form = $('#fileform')[0];
    var fd = new FormData( form );
    xhr.send( fd );
});

并在服务器中使用此代码:

def PUT( self ):
    try:
        x = web.input(myfile={})
        filename = data.getUserFilename( session.user, x['myfile'].filename )
        data.saveFile( filename, x['myfile'].file )
    except:
            print sys.exc_info()
            web.debug( "can't save file" )

    return "OK"

但是,当我使用文件> 2GBs aprox。我在web.input方法中遇到错误。

    File "/usr/local/lib/python2.7/dist-packages/web/wsgiserver/__init__.py", line 1008, in readline
    bline = buf.readline(size)
OverflowError: signed integer is greater than maximum

我可以在使用当前方法上传文件时检查客户端,但是,可以用什么来上传大于2GB的文件?

1 个答案:

答案 0 :(得分:0)

我解决了以块的形式将文件切片并一次一个地发送到服务器的问题。

首先,我们创建一个包含有关文件和传输过程的信息的变量,然后我们向服务器发送一条消息以启动:

function sendBigFile(){
    var input = $('#filesel')[0]
    var file = input.files[0]
    var descriptor = {
        sended: 0,
        file: file,
        filename: file.name,
        total: file.size,
        chunkSize: 5*1024*1024,
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function( e ){
        if( 4 == this.readyState ){
            sendBigFilePart( descriptor )
        }
    };

    xhr.open( 'PUT', '/web/ajax/filepart', true )

    var fd = new FormData()
    fd.append( 'status', 'start' )
    fd.append( 'myfilename', descriptor.filename )
    xhr.send( fd )
}

然后文件的每个部分都发出:

function sendBigFilePart( desc ){
    if( desc.sended >= desc.total ){
        // assert desc.sended == desc.total ??
        sendBigFileEnd( desc )
    }else{
        var chunk = Math.min( desc.total - desc.sended, desc.chunkSize )
        var current = desc.sended
        var blob = desc.file.slice( current, current + chunk )

        desc.sended = desc.sended + chunk

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function( e ){
            if( 4 == this.readyState ){
                sendBigFilePart( desc )
            }
        };

        xhr.open( 'PUT', '/web/ajax/filepart', true );

        var fd = new FormData();
        fd.append( 'myfile', blob )
        fd.append( 'status', 'part' )
        fd.append( 'myfilename', desc.filename )
        xhr.send( fd );
    }
}

最后,我们发送最后一条消息来标记传输结束:

function sendBigFileEnd( desc ){
    var xhr = new XMLHttpRequest();

    xhr.open( 'PUT', '/web/ajax/filepart', true )

    var fd = new FormData()
    fd.append( 'status', 'end' )
    fd.append( 'myfilename', desc.filename )
    xhr.send( fd )
}