Я пытаюсь выполнить упражнение, в котором я вводю несколько изображений одно за другим в первый входной файл, и я хотел бы, чтобы они автоматически сохранялись в файле множественного ввода, чтобы отправить последние по почте в .php и загрузить их на сервер, но не как это сделать.
Я думаю, что это можно сделать, потому что входной файл множественный является fileList, а во входном файле это просто файл, но я не знаю, как вставить его автоматически.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form action="preuba.php" method="POST">
<input name="file-input" id="file-input" type="file" />
<output id="preview"></output>
<br><br>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<input type="submit" name="send">
</form>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
document.getElementById("file-input").onchange = function(e) {
let reader = new FileReader();
reader.onload = function() {
let preview = document.getElementById('list'),image = document.createElement('img');
image.src = reader.result;
preview.innerHTML += '';
preview.append(image);
};
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>