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>
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]);
}
}