Preview de multiplos arquivos com inputs diferentes
Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.
Meu codigo:
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
background-color: #f5f8ff;
}
.container{
background-color: #ffffff;
width: 60%;
min-width: 450px;
position: relative;
margin: 50px auto;
padding: 50px 20px;
border-radius: 7px;
box-shadow: 0 20px 35px rgba(0,0,0,0.05);
}
input[type="file"]{
display: none;
}
label{
display: block;
position: relative;
background-color: #025bee;
color: #ffffff;
font-size: 18px;
text-align: center;
width: 300px;
padding: 18px 0;
margin: auto;
border-radius: 5px;
cursor: pointer;
}
.container p{
text-align: center;
margin: 20px 0 30px 0;
}
#images{
width: 80%;
position: relative;
margin: auto;
display: flex;
justify-content: space-evenly;
gap: 20px;
flex-wrap: wrap;
}
figure{
width: 45%;
}
img{
width: 100%;
}
figcaption{
text-align: center;
font-size: 2.4vmin;
margin-top: 0.5vmin;
}
HTML:
<div class="container">
<input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>
<label for="file-input">
<i class="fas fa-upload"></i> Escolha seus arquivos
</label>
<p id="num-of-files">Nenhum arquivo escolhido</p>
<div id="images"></div>
</div>
<div class="container">
<input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>
<label for="file-input">
<i class="fas fa-upload"></i> Escolha seus arquivos
</label>
<p id="num-of-files">Nenhum arquivo escolhido</p>
<div id="images"></div>
</div>
JAVASCRIPT:
let fileInput = document.getElementById("file-input");
let inputFile = document.querySelectorAll("#file-input");
let imageContainer = document.getElementById("images");
let numOfFiles = document.getElementById("num-of-files");
function preview(input){
imageContainer.innerHTML = "";
numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`;
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");
if(figCap.innerText.split('.').pop() == 'pdf'){
img.setAttribute("src","pdf.png");
}else{
img.setAttribute("src",reader.result);
}
figure.insertBefore(img,figCap);
}
imageContainer.appendChild(figure);
reader.readAsDataURL(i);
}
}Discussão (3)
Carregando comentários...