Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal. Ao selecionar uma imagem qualquer no input1, estou tentando carregar automaticamente a mesma imagem no input2
input1
<input type="file" id="id1" name="input1" onchange="teste()"> <br> <br>
input2
<input type="file" id="id2" name="input2">
<script>
function teste(){
var x = document.getElementById('id1');
x.files;
document.getElementById('id2').files.x;
}
}
</script>Replicar a imagem selecionada no primeiro input para o segundo, e diretamente isso não é viável devido às restrições de segurança dos navegadores. Eles não permitem que scripts manipulem arquivos de input de forma direta por razões de privacidade.
Mas uma maneira de contornar essa limitação, mostrando a imagem selecionada em ambos os campos, mesmo que não possamos tecnicamente "carregar" a imagem no segundo input.
Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
</head>
<body>
<h2>Input1 - Escolha uma Imagem</h2>
<input type="file" id="id1" name="input1" onchange="carregarImagem(event)"> <br><br>
<h4>Imagem Selecionada no Input1:</h4>
<img id="img1" style="width: 100px; height: 100px;" /><br><br>
<h2>Input2 - Visualização da Imagem do Input1</h2>
<input type="file" id="id2" name="input2" disabled> <!-- Desativei este campo, pois não é possível atribuir arquivos diretamente -->
<h4>Imagem Espelhada do Input1 no Input2:</h4>
<img id="img2" style="width: 100px; height: 100px;" />
<script>
function carregarImagem(event){
var reader = new FileReader();
reader.onload = function(){
var output1 = document.getElementById('img1');
var output2 = document.getElementById('img2');
output1.src = reader.result;
output2.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
</script>
</body>
</html>
Mas qual seria o objetivo?
Pra q fazer isso?
Qual a finalidade?