0

I want to display an image via an input field and then display it. How do I make it work. In principle, I would simply like to display a picture that serves as a profile picture, which is later saved in a database. But first it should be easy to upload so that it is displayed

function Speichern() {
    var Profilbild = document.getElementById('pb').value;
    var c = Profilbild + ".png"
    document.getElementById('Profilbild').src = c;
}

 <div id="Profil">
     <img id="Profilbild" src="./Bilder/Profil.png" height="100px" alt="">
 </div>
 <form action=""onsubmit="Speichern();return false">
     <label for="username">Nutzername:</label>
     <input id="username" id="username" type="text" placeholder="<?php
         echo $_SESSION['username']; 
     >">
     <label for="email">Email:</label>
     <input id="email" id="email" type="text" placeholder="<?php
         echo $_SESSION["email"];
     >">
     <label for="pw">Passwort:</label>
     <input id="pw" id="pw" type="password" placeholder="<?php
         echo $_SESSION["pw"];
     >">
     <label for="pb">Profilbild:</label>
     <input type="file" id="pb" name="pb" accept="image/*">
     <button type="submit" >Ändern/Speichern</button>
 </form>
TheBrain04
  • 1
  • 1

1 Answers1

1

The code of this Thread works.

But it seems like the live demo has some mistakes. If you look in the console you will see the following errors

runner-4.1.8.min.js:1 Mixed Content: The page at 'https://jsbin.com/uboqu3/1/edit?html,js,output' was loaded over HTTPS, 
but requested an insecure stylesheet
'http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css'.
This request has been blocked; the content must be served over HTTPS.

(anonymous) @ runner-4.1.8.min.js:1
runner-4.1.8.min.js:1 Mixed Content: The page at 'https://jsbin.com/uboqu3/1/edit?html,js,output' was loaded over HTTPS,
but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.

you can fix this by replacing

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

with

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jquery-ui and jquery-ui.css aren't necessary for the code to work so you can just remove this script and the link tags.

The full working code would like that

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- jsbin automatically includes the script. So you have to include it yourself -->
<script src="yourscript.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

yourscript.js

     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
noah1400
  • 1,282
  • 1
  • 4
  • 15