How to change cover photo

Question

How to change cover photo

Asked 7 years, 4 months ago

Viewed 226 times

0

How to update photo from this cover from my computer with javascript, button input type="file" or with nodejs.

Follows the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
    #teste {
        background-image: url('html.png');
        height: 250px;
        width: 900px;
        border: 1px solid black;    
    }
    h1 {
        text-align: center;
    }
    button, input {
        margin: 10px;
    }
</style>
</head>
<body>
<div id="teste">
    <button style="font-size:24px">Atualizar foto de capa <i class="fa fa-camera"></i></button><br><br>
    <input type="file" name=""> 
</div>
    <h1>Página teste</h1>
</body>
</html>

Change image in real time?

– usuario

2017/07/13 at 17:46

1 answer

Browser other questions tagged javascript file-upload image background-image

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

by usuario • **1,396** points · Answer 1 · 2017-07-13T17:48:39+00:00

To update the image in real time you can try this way:

  function showThumbnail(filess) {
    var url = filess.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (filess.files && filess.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
      var reader = new FileReader();
        reader.onload = function (e) {
          document.getElementById('fotoCapa').setAttribute('src', e.target.result);
      }
      reader.readAsDataURL(filess.files[0]);
    }
  }

<input type="file" id="upload" onchange="showThumbnail(this);"/>


<div class="imagem">
  <img id="fotoCapa" src="https://return-true.com/wp-content/uploads/2013/06/jquery-tabs-html5-history.png">
</div>

If you want to save this image you can use ajax or send as a form.

Regarding ajax in pure Javascript this site has a complete example: WEBSITE