CGI.pm: закрытый сокет сервера во время многочастного чтения (клиент прерван?) При загрузке изображений с помощью Javascript - PullRequest
Новая
       16

CGI.pm: закрытый сокет сервера во время многочастного чтения (клиент прерван?) При загрузке изображений с помощью Javascript

0 голосов
/ 11 ноября 2019

Я пытаюсь написать веб-страницу, которая позволяет пользователю загружать несколько изображений на сервер. Ожидается, что страница будет в основном использоваться на мобильном устройстве. Код, который я имею, позволяет пользователю выбирать изображения по одному и отображает миниатюру каждого изображения. В то же время он заполнил массив Javascript, который позже используется для загрузки всех изображений при отправке формы.

Я могу загружать изображения по мере их выбора. Однако этот подход оставляет изображения на сервере без информации о них, если пользователь выбирает изображение, но не отправляет форму.

Когда форма отправлена, журнал ошибок сервера записывает CGI.pm: Server closed socket during multipart read (client aborted?)HTML и Javascript ниже генерируются из сценария Perl, который использует модуль CGI для чтения формы и загрузки изображений.

Я попытался просто добавить одно изображение к объекту formData, и это вызывает ту же ошибку. 

<html>
<body>
<style type="text/css">
.thumbnail: {width: 400px}
</style>
<script type="text/javascript">
var xhr=new XMLHttpRequest();
var image = [];
var temp;
function addImage(file) {
    image.push(file);
    temp = file;
    document.getElementById('debug').innerHTML = file.name;
    var thumb = document.createElement('img');
    var line  = document.createElement('br');
    thumb.classList.add('thumbnail');
    document.getElementById('preview').appendChild(thumb);
    document.getElementById('preview').appendChild(line);

    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            // populate newly created Image object with image file
            aImg.src = e.target.result;
        }; })(thumb);
    reader.readAsDataURL(file);
}

function sendForm() {
    // Disable form buttons
    document.getElementById('sendbutton').disabled = true;
    document.getElementById('camera').disabled = true;
    // Display annimated wait notification
    document.getElementById('progress').style.width = screen.width * 0.8;
    document.getElementById('progress').style.top = screen.height / 2 - 100;
    document.getElementById('progress').style.left = 10;
    document.getElementById('progress').style.display = 'block';

    xhr.open("POST","/cgi-bin/test.pl",true);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.onreadystatechange=function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('progress').style.display = 'none';
        }
    }

    var formData = new FormData(document.getElementById('fm'));

    // Add images to form if there are any
    if (image.length > 0) {
        for (i = 0; i < image.length; i++) {
            formData.append("uploadfile" + i, image[i]);
        }
        formData.append("imagecount", image.length);
    }

    xhr.send(formData);

    return false;
}
</script>
<form name="fm" id="fm" method="post" enctype="multipart/form-data">
<label for="camera"><img src="/images/camera.png" style="width:200px"></label>
<input type="file" id="camera" accept="image/*" style="display:none" onChange="addImage(this.files[0]);">
<br>
<input type="image" id="sendbutton" src="/images/send.png" style="width:200px;margin:4px 12px 0 8px" onClick="return(sendForm());">
<div id="preview" style="text-align:center;vertical:align:middle"></div>

<div id="debug"></div>

<div id="progress" style="background-color:white;border:medium solid darkblue;border-radius:10px;text-align:center;padding:30px;font-size:16pt;position:fixed;display:none">
<b>Uploading Report</b><br>
<img src="/images/upload.gif" style="width:80%"><br>
<b>please wait...</b>
</div>

</body>
</html>

Желаемый результат заключается в том, что Javascript добавляет каждый файл к объекту formData из массива image и что я могу читать их на сервере. Тем не менее, индикатор выполнения отображается правильно, но не очищается снова, и сервер генерирует ошибку CGI.pm: Server closed socket during multipart read (client aborted?).

...