1

Bom o que eu estava tentando fazer, era a página home pudesse carregar um arquivo do propio computador, e alterar a imagem na index, porém eu percebi que o js não encontra a imagem da index, e quando que eu vou tentar atribuir ocorre um erro, queria saber como o js, pode ver todos os atributos da página

Meu index

<!DOCTYPE html>
<html>
  <head>
      <title>Exemplo 01</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 </head>
 <body>
      <img src="download.jpg" id="imagem">

      <script type="text/javascript" src="js/app.js">

      </script>
  </body>
</html>

Home

<!DOCTYPE html>
<html>
  <head>
     <title>Exemplo 01</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 </head>
 <body>

     <div class="container">
         <input type="file" id="arquivo">
          <br><button onclick="muda()">Mudar imagem</button>
     </div>
    <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

Meu js

function muda(){
  let imagem = document.getElementById('imagem');
  let arquivo =  document.getElementById('arquivo');
  imagem.src = arquivo.value;
}
1
  • Acontece que o arquivo app.js é recarregado quando você dá um refresh ou muda de página para outra*, uma forma de persistir o valor, é utilizando o LocalStorage. Você também deve utilizar a propriedades files para acessar o arquivo. Ao acessar elemento_file.value, o resultado, por medida de segurança, será o fake path. pt.stackoverflow.com/a/269912/99718 Commented 16/02/2019 às 15:42

1 Resposta 1

1

Como já foi comentado o valor que fica no input.value de um <input type='file'> é o fake path por medida de segurança.
Se você quiser carregar o arquivo na pagina sem ter que subir para o servidor você pode utiliza algo como o código abaixo.

Se você quiser subir o arquivo para o servidor neste link mostra como fazer o upload via ajax pelo metodo post. Agora apos fazer o upload para o servidor você irá precisar tratar os dados do lado do servidor e a partir deste ponto vai depender da linguagem que seu servidor utiliza (php,nodejs,asp.net,...)


Código mostrar imagem sem ter que subir em um servidor:

$("#arquivo").on('change',muda) /// evento para saber quando mudou o arquivo selecionado

function muda(){
    if( !this.files || this.value == "" ) return
    var reader = new FileReader(),  /// Objeto usado para carregar a imagem
        file = this.files[0]; /// Arquivo selecionado

    reader._file = file;    /// Guardo a referencia do file na propria FileReader
    reader.onload = function(e){
        var self = this,          /// FileReader
            file = self._file,    /// referencia que guardei
            data = self.result;   /// Dados do resultado do reader

            $('.show_image').html("<img src='"+data+"'>"); /// mostra a imagem no html 
    }

    reader.readAsDataURL(reader._file); /// função para carregar em formato url base64
}
.show_image{
  width:200px;
  height:200px;
  border:1px solid #CCC;
  margin: 2px;
}
.show_image img{
  max-width: 200px;
  max-height: 200px;
}
<!DOCTYPE html>
<html>
  <head>
     <title>Exemplo 01</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
     <div class="container">
         <div class='show_image'>
         </div>
         <input type="file" id="arquivo">
     </div>
    <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .