我正在尝试编写一个网页，允许用户将多个图像上传到服务器。预计该页面将主要在移动设备上使用。我拥有的代码允许用户一次选择一个图像，并显示每个图像的缩略图。同时，它填充了一个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对象，并且我可以在服务器上读取它们。但是，进度div可以正确显示，但不会再次清除，并且服务器正在生成CGI.pm: Server closed socket during multipart read (client aborted?)错误。