Muestro imágenes antes de enviar un botón, se ve así: una tras otra imágenes
Pero quiero que se alinee como uno al lado del otro ¿Cómo puedo hacerlo? aquí está mi código js
let fileInput = document.getElementById('file-input'); let imageContainer = document.getElementById('images'); function preview() { imageContainer.innerHTML = ''; for (i of fileInput.files) { let reader = new FileReader(); let figure = document.createElement('figure'); let figCap = document.createElement('figcaption'); figCap.innerText = i.name; figure.appendChild(figCap); reader.onload = () => { let img = document.createElement('img'); img.setAttribute('class', 'col-sm-5'); img.setAttribute('src', reader.result); figure.insertBefore(img, figCap); }; imageContainer.appendChild(figure); reader.readAsDataURL(i); } }aquí está mi código HTML
<div class="form-group col-md-12"> <label>File upload</label> <div class="input-group col-xs-12"> <input type="file" accept="image/*" id="file-input" onchange="preview()" class="form-control btn btn-primary mb-xl-4" multiple> </div> <div class="row"> <div class="form-group col-md-12"> <div id="images" onclick="myFunc()"> </div>Espero que esto resuelva su problema, agregando col-sm-5 a la etiqueta de la figura y configurando el ancho de la imagen;
let fileInput = document.getElementById("file-input"); let imageContainer = document.getElementById("images"); function preview() { imageContainer.innerHTML = ""; for (i of fileInput.files) { let reader = new FileReader(); let figure = document.createElement("figure"); let figCap = document.createElement("figcaption"); figCap.innerText = i.name; figure.appendChild(figCap); reader.onload = () => { let img = document.createElement("img"); figure.setAttribute("class", 'col-sm-5'); img.setAttribute("src", reader.result); img.style.width = "inherit"; figure.insertBefore(img, figCap); } imageContainer.appendChild(figure); reader.readAsDataURL(i); } } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="form-group col-md-12"> <label>File upload</label> <div class="input-group col-xs-12"> <input type="file" accept="image/*" id="file-input" onchange="preview()" class="form-control btn btn-primary mb-xl-4" multiple> </div> <div class="row"> <div class="form-group col-md-12"> <div class="row" id="images" onclick="myFunc()"> </div> </div> </div> </div>