JavaScript上传进度条,xhr.status错误500,但加载了一个文件

时间:2015-03-25 22:00:15

标签: javascript php xmlhttprequest progress-bar multiple-files

我的脚本用于上传一个或多个multipart/form-data文件时出现问题。

在我的客户端服务器上,当我尝试上传多个文件时,收到:

  

xhr.status错误500;

第一个文件上传好了,但我无法上传超过1个文件。在我的服务器上,一切正常 - 没有error 500.

我在网上寻求帮助,但我只能找到有关服务器问题的信息,例如:无法接受POST,GET,OPTIONS ......

但它正在使用一个文件 - 而且我被卡住了。

我尝试逐个上传文件,但后来我的进度条闪烁着......

这是我的代码:

$(document).ready( function() {
    $(".errorNotice").hide();
});

var form = document.getElementById('upload-form');
var ident = document.getElementById('ident');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('submit');
var max = document.getElementById('max');
var formUrl = form.action;

function sleep(milliseconds) {
    setTimeout(function(){ return true; }, milliseconds);
}

form.onsubmit = function(event) {
    event.preventDefault();

    uploadButton.innerHTML = 'Trwa ładowanie...';
    $("#upload-form").fadeOut();
    setTimeout(function() {
        $("#progressBar").fadeIn();
    }, 500);

    var files = fileSelect.files;
    var formData = new FormData();

    if( files.length > max.value) {
        if( max.value == 1) {
            var text = max.value + ' zdjęcie';
        }
        else if( max.value >1 && max.value <= 4) {
            var text = max.value + ' zdjęcia';
        }
        else {
            var text = max.value + ' zdjęć';
        }
        $("#progressBar").find("p").html('Możesz dodać maksymalnie: ' + text);
        setTimeout(function() {
            $("#progressBar").hide();
            $("#upload-form").fadeIn();
        }, 5000);
        return false;
    }

    if( files.length == 0 )
    {
        $("#progressBar").hide();
        $("#upload-form").show();
    }

    formData.append('ident', ident.value);
    formData.append('modules', 'true');

    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        if (!file.type.match('image.*')) {
            continue;
        }

        formData.append('objectPhoto[]', file, file.name);
        formData.append(name, file, file.name);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', formUrl , true);

    xhr.upload.addEventListener("progress", function(e) {
        if(e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            document.getElementById("bar").style.width = percentage + '%';
            document.getElementById("percent").innerHTML = percentage + '%';
        }
    }, false);

    xhr.onload = function () {
        console.log(this.responseText);
        if(this.responseText == "ok") {
            document.getElementById("percent").innerHTML = "Zakończono";
            document.getElementById("progressBar").style.display = "none";
            document.getElementById("upload-form").style.display = "block";
        } else {
            $(".errorNotice").show();
            $(".errorNotice .error-text").html(this.responseText);
        }

        if (xhr.status === 200) {
            uploadButton.innerHTML = 'Wgraj';
        } else {
            $(".errorNotice").show();
            $(".errorNotice .error-text").html("Wystąpił nieoczekiwany błąd o kodzie: " + xhr.status);
            uploadButton.innerHTML = 'Wyślij';
        }
    };

    xhr.send(formData);
    return false;
};

0 个答案:

没有答案