我想通过输入字段显示图像，然后显示它。我该怎么做呢?原则上，我只想显示一张用作个人资料图片的图片，稍后将其保存在数据库中。但首先，它应该易于上传，以便显示
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>
这个线程的代码可以工作。
但是看起来现场演示有一些错误。如果查看控制台中，您将看到以下错误
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.
你可以通过替换
来解决这个问题<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jquery-ui和jquery-ui.css对于代码的工作不是必需的，所以你可以删除这个脚本和链接标签。
完整的工作代码就像
<!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]);
}
}