AJAX错误:POST http:// localhost / upload / undefined 404(未找到)

时间:2019-02-26 21:19:26

标签: javascript ajax xmlhttprequest

我已经在网上搜索并测试了几个小时,但是我无法查明错误是什么。因此,我在这里寻求您的帮助。我一步一步地遵循了具有拖放功能的多个文件上传教程,但是我得到了标题中提到的错误消息(引发错误的代码行是xmlhttp.send(data);)。 文件upload.js具有此功能:

(function(o) {
    "use strict";

    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.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;
    };

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

并且global.js文件具有以下代码:

(function() {
    "use strict";

    var dropZone = document.getElementById('drop-zone');
    var uploadsFinished = document.getElementById('uploads-finished');

    var startUpload = function(files) {
        app.uploader({
            files: files,
            Processor: 'upload.php',

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

                for (x = 0; x < data.length; x = x + 1) {
                    currFile = data[x];
                    uploadedElement = document.createElement('div');
                    uploadedElement.className = 'uploaded-console-upload';

                    uploadedAnchor = document.getElementById('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();

    });

    //Drop funtionality
    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;
    };

}());

任何解决此问题的帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:0)

o.options.processor被定义为Processor,在以后的代码中被调用时,它被称为processor(从Processor变为{{1} })解决了这个问题。谢谢您的评论,帮助我找到了错误。