Выбор нескольких изображений, но хранение данных в разных местах с использованием Javascript
Поэтому я использую следующий код для пользователей для загрузки фотографий (как вы можете видеть, я не позволяю пользователю выбрать несколько файлов одновременно, ему придется выбрать один файл, открыть его, затем выбрать следующий файл, открыть его так далее).
HTML:
<input type="file" capture="camera" accept="image/*" id="files1" name="files[]">
<output id="list"></output>
<form action="post.php">
<input type='hidden' id='imgsrc1' name='imgsrc1'>
<input type='hidden' id='filepath1' name='filepath1'>
<input type='hidden' id='imgsrc2' name='imgsrc2'>
<input type='hidden' id='filepath2' name='filepath2'>
<input type='hidden' id='imgsrc3' name='imgsrc3'>
<input type='hidden' id='filepath3' name='filepath3'>
<input type="submit" name="submit" value"Submit Listing">
</form>
JavaScript
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
imgsrc = e.target.result;
filename = theFile.name;
filepath = "images/uploads/" + theFile.name;
span.innerHTML = ['<img class="thumb" src="', imgsrc,
'" title="', filepath, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
document.getElementById('filepath1').value=filepath;
document.getElementById('imgsrc1').value=imgsrc;
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files1').addEventListener('change', handleFileSelect, false);
Пользователь выбирает первое изображение, затем JavaScript отображает фотографию, добавляя ее внутрь <output id="list"></output>
Строки ниже (взятые из кода выше) сохраняют путь выбранного изображения в поле ввода 'filepath1' и данные изображения base64 в поле ввода 'imgsrc1':
JavaScript:
document.getElementById('filepath1').value=filepath;
document.getElementById('imgsrc1').value=imgsrc;
HTML:
<input type='hidden' id='imgsrc1' name='imgsrc1'>
<input type='hidden' id='filepath1' name='filepath1'>
Проблема в том, что я хочу, чтобы пользователь мог выбрать 3 изображения по одному. Когда пользователь выбирает первое изображение, это нормально, но когда он выбирает второе изображение, он снова запускает эту функцию JavaScript и перезаписывает / добавляет все, что хранится в скрытых полях ввода.
Когда пользователь выбирает второе изображение, я хочу, чтобы данные сохранялись в двух разных скрытых полях ввода, например:
<input type='hidden' id='imgsrc2' name='imgsrc2'>
<input type='hidden' id='filepath2' name='filepath2'>
Я понятия не имею, как это сделать. Вероятно, есть действительно простой способ сделать это с помощью счетчика или чего-то еще, но сейчас это 23:18, и у меня завтра клиент в 8 утра, это последний бит, который мне нужно исправить для них, смеется. Любая помощь будет оценена.
2 ответа
Добавьте счетчик и просто увеличивайте его каждый раз, когда добавляете изображение:
var imgNum = 0;
function handleFileSelect(evt) {
if (imgNum > 3) return;
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
imgsrc = e.target.result;
filename = theFile.name;
filepath = "images/uploads/" + theFile.name;
span.innerHTML = ['<img class="thumb" src="', imgsrc,
'" title="', filepath, '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
document.getElementById('filepath'+imgNum).value=filepath;
document.getElementById('imgsrc'+imgNum).value=imgsrc;
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
imgNum++;
}
document.getElementById('files1').addEventListener('change', handleFileSelect, false);
Если я получу то, что вы хотите, то наивным решением будет использование вашего соглашения об именах и index
вашего цикла:
for ( let i = 1; i <= 3; i++ ) {
f = files[ i - 1 ]
// ...
document.getElementById( 'filepath' + i ).whatever
}
Сказав, что я, вероятно, пойду по-другому, я добавлю прослушиватель событий и просто добавлю новые файлы в массив, если массив достигнет максимальной длины (в данном случае 3), а затем выполнил некоторую логику, которая останавливает пользователя. загружать больше, а затем отправлять данные, как вам нравится, без использования <form>
и скрытые элементы.