Question

我正在使用API将视频文件上传到第三方服务器。

我有一个上传功能vim.uploadVidFile，其中包含进展＆＃39;并且＆＃39;加载＆＃39;事件听众。如果有互联网连接丢失，我有第二个功能，上传文件从上传中断，vim.resumeUpload。这个功能共享相同的进步＆＃39;并且＆＃39;加载＆＃39;事件听众。

我遇到的问题是＆＃39;进展＆＃39;和＆＃39;加载＆＃39;事件侦听器仍在注册要上载的文件的原始大小，而不是新的（originalFileSize - fileSizeAlreadyUploadedToServer）。这会影响我的进度条，而不是从我停止的位置上传，而是重新上传整个文件。

参考vim.uploadProgres我发现在控制台中：

console.log('ORIGINAL_e.total: '+ e.total) == console.log('adjusted_e.total: '+ e.total);

vim.uploadVidFile功能：

vim.uploadVidFile = function(){
    console.log('uploadVidFile()...');

    // GET VIDEO FILE
    var input = document.getElementById('vidInput');
    var vidFile = input.files[0];

    var xmh = new XMLHttpRequest;

    // SET EVENT LISTENERS
    xmh.upload.addEventListener('progress', vim.uploadProgres, false);
    xmh.addEventListener('load', vim.uploadComplete, false);
    xmh.addEventListener('error', vim.uploadError, false);

    xmh.onreadystatechange = function(){
        if(this.readyState == this.HEADERS_RECEIVED){
            console.log('RESPONSE HEADERS: ' + xmh.getAllResponseHeaders());
        }
    }
    xmh.open('PUT', vim.upload_link_secure);
    xmh.send(vidFile);
}

vim.resumeUpload功能：

vim.resumeUpload = function(stringArgument){
    console.log('vim.resumeUpload() ...');
    console.log('stringArgument: ' + stringArgument);

    // GET VIDEO FILE
    var input = document.getElementById('vidInput');
    var vidFile = input.files[0];

    var xmh = new XMLHttpRequest;

    // SET EVENT LISTENERS
    // SET EVENT LISTENERS
    xmh.upload.addEventListener('progress', vim.uploadProgres, false);
    xmh.addEventListener('load', vim.uploadComplete, false);
    xmh.addEventListener('error', vim.uploadError, false);

    xmh.onreadystatechange = function(){
        if(xmh.readyState == xmh.HEADERS_RECEIVED){
            console.log('VERIFY RESPONSE HEADERS222: ' + xmh.getAllResponseHeaders());
            console.log('getResponseHeader(\'Content-Range\')222' + xmh.getResponseHeader("Range"));
        }
    }
    xmh.open('PUT', vim.upload_link_secure);
    xmh.setRequestHeader('Content-Range', stringArgument);
    xmh.send(vidFile);

}

＆＃39;进度＆＃39;事件监听：

// vim.bytesUploaded - bytes already uploaded to the server

vim.uploadProgres = function(e){
    console.log('bytesUploaded_CONSTANT: '+ vim.bytesUploaded);

    if(vim.bytesUploaded == 0){
        var percent = (e.loaded/e.total) * 100;
        document.getElementById('span_fill').setAttribute('style', 'width: '+ percent + '%');
        document.getElementById('p_status').innerHTML= Math.round(percent) + '%'; 

        console.log('e.loaded: '+e.loaded);
        console.log('e.total: '+e.total);
    }else{

        console.log('ORIGINAL_e.total: '+ e.total);
        e.total = e.total - vim.bytesUploaded;

        var percent = (e.loaded/e.total) * 100;
        document.getElementById('span_fill').setAttribute('style', 'width: '+ percent + '%');
        document.getElementById('p_status').innerHTML= Math.round(percent) + '%';
        console.log('adjusted_e.total: '+ e.total);
        console.log('uploadedFoFar: ' + uploadedFoFar);
    }
}

分享xmlhttpObject＆＃39;进展＆＃39;并且＆＃39;加载＆＃39;两个函数之间的事件处理程序（无JQUERY）

0 个答案: