Puxando uma imagem no HTML

[Frank K Hosaka]

O elemento que trabalha com a imagem no HTML é o <img> e o elemento que busca o arquivo da imagem é o <input type=file>, e o melhor recurso para conectar esses dois elementos é JavaScript. O problema é que eu só sei trabalhar com o comando alert(), e o máximo que eu consegui foi "C:\fakepath\foto.jpg". Durante três horas estudei no Google a melhor forma de usar o comando str.replace() do Java para consertar o caminho do arquivo, mas eu não consegui nada, absolutamente nada.

Por sorte encontrei a resposta número 60 nessa dica do Google: javascript - How to resolve the C:\fakepath? - Stack Overflow, não sei como ele funciona, mas funciona!

Claro que o melhor é entender. Isso eu não consegui, mesmo assim, consegui montar esse código:

astudy.php
-------------------------------------------------------
<?php
// esse código pressupõe que as fotos foram guardadas numa pasta chamada fotos/
require_once 'config.php';
$datacadastro=date('Y-m-d');
?> 
<style>
div {height: 300px;display: inline-block}
#painelesq {width:300px}
#paineldir {widht:100px;position:fixed;top:25%;left:20%}
</style>
<script>
function verfoto(){
input = document.getElementById("inpfoto");
fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
img = document.getElementById("foto-cliente");
img.src = event.target.result;}}
</script>
<fieldset style=width:200px;height:400px>
<legend><h3>Novo Cadastro</h3></legend>
<form action="action_foto.php" method="post" id='form-contato' enctype='multipart/form-data'>
	<div id=painelesq>
	<table>
	<tr><td>Selecionar Foto<input type="file" name="foto" id="inpfoto" onchange=verfoto()>
	<tr><td>
	<tr><td><input name="matricula" placeholder="Matricula">
    <tr><td><input name="tipo" placeholder="Tipo de Cliente">
	<tr><td><input name="nome" placeholder="Nome">
	<tr><td><input name="identidade" placeholder="RG">
	<tr><td><input name="veiculo" placeholder="Veiculo">
	<tr><td><input name="placa" placeholder="Placa">
	<tr><td><input name="cidade" placeholder="Cidade">
	<tr><td><input name="uf" placeholder="Estado">
	<tr><td><input name="empresa" placeholder="Empresa">		      
	<input type=hidden name="datacadastro" value=<?=$datacadastro?>>	
	<tr><td>Liberado<input name="situacao" type="radio" value="1">
    Não liberado<input name="situacao" type="radio" value="2" checked>
    <tr><td><button type="submit">Gravar</button>
	<a href='cadastro_pessoas.php'>Cancelar</a>
	</table>
	</div>
	<div id=paineldir>
	<img src="fotos/padrão.jpg" height="190" width="150" id="foto-cliente">
	</div>
</form>
</fieldset>

 

Editado Agosto 5, 2022 por Frank K Hosaka