0

由于某种原因，我的文件上传脚本无法正常工作，我完全不知道为什么：？该脚本设法发送文件，但我无法跟踪进度或状态更改。我试图注释掉不必要的调试位，但它仍然不起作用。

如果有人能指出我的错误，我将永远感激并给你一个虚拟饼干

$('#submit').click(function(e){
            e.preventDefault();
            $('#progressContainer').slideDown(10);
            var f = document.getElementById('file'),
                pb = document.getElementById('pb'),
                pt = document.getElementById('pt');

            app.uploader({
                files:f,
                progressBar:pb,
                progressText:pt,
                processor:'scripts/php/upload.php',

                finished: function(){
                    $('#pt').html("Upload complete");
                },
                error: function(){
                    $('#pt').html("Upload Error, please try again");
                }
            });
        });

var app = app || {};

(function(o){
    "use strict"

    var ajax, getFormData, setProgress;

    ajax = function(data){
        var xmlhttp = new XMLHttpRequest(), uploaded;
        xmlhttp.addEventListener('readystatechange', function(){
            if(this.readystate === 4){
                if(this.status === 200){
                    //uploaded = JSON.parse(this.response);
                    //if(typeof o.options.finished === 'function'){
                        o.options.finished();
                    //}
                } else {
                    //if(typeof o.options.error === 'function'){
                        o.options.error();
                    //} 
                }   
            }
        });
        xmlhttp.upload.addEventListener('progress', function(event){
            var percent;
            //if(event.lengthComputable === true){
                percent = math.round(event.loaded / event.total * 100);
                setProgress(percent);
                alert(percent)
            //}
        });
        xmlhttp.open('POST', o.options.processor);
        xmlhttp.send(data);
    }
    getFormData = function(src){
        var data = new FormData(), i;
        for(i=0;i<src.length;i++){
            data.append('file[]',src[i]);
        }
        data.append('formSent',true);
        return data;
    }
    setProgress = function(val){
        $('#pb').animate({width:val+"%"},10);
        $('#pt').html(val+"%");
    }

    o.uploader = function(opt){
        o.options = opt;
        if(o.options.files !== undefined){
            ajax(getFormData(o.options.files.files));
        }
    }
}(app));
4

3 回答 3

0

我使用了“math.round()”而不是“Math.round()”。一个非常简单的错误，但它阻止了脚本的其余部分执行。感谢 Marvin Medeiros 提供始终检查错误控制台的合理建议

var app = app || {};

(function(o){
    "use strict"

    var ajax, getFormData, setProgress;

    ajax = function(data){
        var xmlhttp = new XMLHttpRequest(), uploaded;
        xmlhttp.addEventListener('onreadystatechange', function(){
            if(xmlhttp.readystate === 4){
                if(xmlhttp.status === 200){
                    uploaded = JSON.parse(this.response);
                    if(typeof o.options.finished === 'function'){
                    o.options.finished();
                    }
                } else {
                    if(typeof o.options.error === 'function'){
                    o.options.error();
                    } 
                }   
            }
        });
        xmlhttp.upload.addEventListener('progress', function(event){
            var percent;
            if(event.lengthComputable === true){
                percent = Math.round(event.loaded / event.total * 100);
                setProgress(percent);
            }
        });
        xmlhttp.open('POST', o.options.processor);
        xmlhttp.send(data);
    }
    getFormData = function(src){
        var data = new FormData(), i;
        for(i=0;i<src.length;i++){
            data.append('file[]',src[i]);
        }
        data.append('formSent',true);
        return data;
    }
    setProgress = function(val){
        $('#pb').animate({width:val+"%"},10);
        $('#pt').html(val+"%");
    }

    o.uploader = function(opt){
        o.options = opt;
        if(o.options.files !== undefined){
            ajax(getFormData(o.options.files.files));
        }
    }
}(app));
于 2016-04-08T19:45:12.167 回答
0

尝试改变这个：

xmlhttp.addEventListener('readystatechange', function(){
        if(this.readystate === 4){
            if(this.status === 200){
                //uploaded = JSON.parse(this.response);
                //if(typeof o.options.finished === 'function'){
                    o.options.finished();
                //}
            } else {
                //if(typeof o.options.error === 'function'){
                    o.options.error();
                //} 
            }   
        }
    });

对此：

xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readystate === 4){
            if(xmlhttp.status === 200){
                //uploaded = JSON.parse(this.response);
                //if(typeof o.options.finished === 'function'){
                    o.options.finished();
                //}
            } else {
                //if(typeof o.options.error === 'function'){
                    o.options.error();
                //} 
            }   
        }
    });
于 2016-04-08T17:57:07.010 回答
0

尝试这个：

xmlhttp.addEventListener('readystatechange', function(e){
        if(e.currentTarget.readyState === 4){
            if(e.currentTarget.status === 200){
               o.options.finished();
            } else {
               o.options.error();
            }   
        }
    });
于 2019-01-29T07:46:34.657 回答