Javascript和PHP文件上传应用程序重定向并导致下载提示

Question

我有一个文件上传应用程序，该应用程序使用ajax调用upload.php文件以上传多个文件。 javascript还显示进度条，并启用页面的拖放功能。

问题是当拖放文件时，应用程序导致出现下载窗口，提示我将文件下载到本地计算机。目的是上传而不是下载。我不知道是什么原因造成的。同样，该应用程序将用户重定向到upload.php页面，在该页面上向用户显示一系列已处理的文件。我希望用户停留在他们上载文件的页面上，以便他们可以看到上载的文件。我有一个“已处理文件” div标签，显示已处理文件。评论echo语句不起作用。

下面是我正在使用的所有执行所有上传功能的主要代码。谢谢。

// upload.php

<?php
header('Content-Type: application/json');

$allowed = ['zip', '7z', 'txt', 'pdf', 'mp4', 'png', 'jpg', 'zip'];
$processed = [];

foreach($_FILES['files']['name'] as $key => $name) {
    if($_FILES['files']['error'][$key] === 0) {

        $temp = $_FILES['files']['tmp_name'][$key];

        $ext = explode('.', $name);
        $ext = strtolower(end($ext));

        $file = $name;

        if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/' . $file)) {
            $processed[] = array(
                'name' => $name,
                'file' => $file,
                'uploaded' => true
            );
        } else {
            $processed[] = array(
                'name' => $name,
                'uploaded' => false
            );
        }

    }
}

//echo json_encode($processed);

// 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));

// 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;
    };
}());