Question

我有一个文件上传页面，该页面使用ajax显示进度条并具有拖放功能（global.js和upload.js）。但是进度条和拖放操作不起作用。我得到了在Global.js中未定义的Uncaught Reference错误应用程序。但是，我在upload.js中定义了应用。为什么抱怨应用程序未定义？谢谢。

// global.js

(function() {
    "use strict";

    var dropZone = document.getElementById('drop-zone');
    var barFill = document.getElementById('bar-fill');
    var barFillText = document.getElementById('bar-fill-text');
    var uploadsFinished = document.getElementById('uploads-finished');

    var startUpload = function(files) {
        app.uploader({
            files: files,
            progressBar: barFill,
            progressText: barFillText,
            processor: 'upload.php',

            finished: function(data) {
                var x;
                var uploadedElement;
                var uploadedAnchor;
                var uploadedStatus;
                var currFile;

                for(x = 0; x < data.length; x = x + 1) {
                    currFile = data[x];

                    uploadedElement = document.createElement('div');
                    uploadedElement.className = 'upload-console-upload';

                    uploadedAnchor = document.createElement('a');
                    uploadedAnchor.textContent = currFile.name;

                    if(currFile.uploaded) {
                        uploadedAnchor.href = 'uploads/' + currFile.file;
                    }

                    uploadedStatus = document.createElement('span');
                    uploadedStatus.textContent = currFile.uploaded ? 'Uploaded' : 'Failed';

                    uploadedElement.appendChild(uploadedAnchor);
                    uploadedElement.appendChild(uploadedStatus);

                    uploadsFinished.appendChild(uploadedElement);
                }

                uploadsFinished.className = '';

            },

            error: function() {
                console.log('There was an error');
            }
        });
    };

    // Standard form upload
    document.getElementById('standard-upload').addEventListener('click', function(e) {
        var standardUploadFiles = document.getElementById('standard-upload-files').files;
        e.preventDefault();

        startUpload(standardUploadFiles);
    });

    // Drop functionality
    dropZone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'upload-console-drop';

        startUpload(e.dataTransfer.files);
    };

    dropZone.ondragover = function() {
        this.className = 'upload-console-drop drop';
        return false;
    };

    dropZone.ondragleave = function() {
        this.className = 'upload-console-drop';
        return false;
    };
}());

// upload.js

var app = app || {};

(function(o) {
    "use strict";

    // Private methods
    var ajax, getFormData, setProgress;

    ajax = function(data) {
        var xmlhttp = new XMLHttpRequest();
        var 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(uploaded);
                    }

                } else {
                    if(typeof o.options.error === 'function') {
                        o.options.error();
                    }
                }
            }
        });

        xmlhttp.upload.addEventListener('progress', function(e) {
            var percent;

            if(e.lengthComputable === true) {
                percent = Math.round((event.loaded / event.total) * 100);
                setProgress(percent);
            }
        });

        xmlhttp.open('post', o.options.processor);
        xmlhttp.send(data);

    };

    getFormData = function(source) {
        var data = new FormData();
        var i;

        for(i = 0; i < source.length; i = i + 1) {
            data.append('files[]', source[i]);
        }

        return data;
    };

    setProgress = function(value) {
        if(o.options.progressBar !== undefined) {
            o.options.progressBar.style.width = value ? value + '%' : 0;
        }

        if(o.options.progressText !== undefined) {
            o.options.progressText.textContent = value ? value + '%' : '';
        }
    };

    o.uploader = function(options) {
        o.options = options;

        if(o.options.files !== undefined) {
            ajax(getFormData(o.options.files));
        }
    };

}(app));

Answer 1

变量app是在upload.js文件中定义的。我认为您应该在global.js之前先加载Upload.js

<script src="/javascripts/upload.js" type="text/javascript"></script>
<script src="/javascripts/global.js" type="text/javascript"></script>

未定义AJAX上传脚本未引用错误应用

1 个答案: