Error loading an image from a file

Asked

Viewed 80 times

0

Well what I was trying to do, was the home page could load a file from the computer itself, and change the image on the index, however I realized that js does not find the image of the index, and when I will try to assign an error occurs, I wanted to know how js, can see all page attributes

My 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>

My js

function muda(){
  let imagem = document.getElementById('imagem');
  let arquivo =  document.getElementById('arquivo');
  imagem.src = arquivo.value;
}
javascript html

  • It turns out that the file app.js is recharged when you give a refresh or changes page to another*, one way to persist the value is by using the Localstorage. You should also use the properties files to access the file. By accessing elemento_file.value, the result, by security measure, will be the fake path. https://answall.com/a/269912/99718

1 answer

1


As already commented the value that is in the input.value of a <input type='file'> is the fake path per security measure.
If you want to upload the file to the page without having to go up to the server you can use something like the code below.

If you want to upload the file to the server at this link shows how to upload via ajax by the way post. Now after uploading to the server you will need to handle the data on the server side and from this point it will depend on the language your server uses (php,nodejs,asp.net,...)


Code show image without having to climb on a server: 

$("#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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.