Quiero mostrar una imagen a través de un campo de entrada y luego mostrarla. ¿Cómo hago para que funcione? En principio, simplemente me gustaría mostrar una imagen que sirva como foto de perfil, que luego se guarda en una base de datos. Pero primero debe ser fácil de cargar para que se muestre
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>El código de este Thread funciona.
Pero parece que la demostración en vivo tiene algunos errores. Si miras en la consola verás los siguientes errores
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.puedes arreglar esto reemplazando
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>con
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>jquery-ui y jquery-ui.css no son necesarios para que el código funcione, por lo que puede eliminar este script y las etiquetas de enlace.
Al código de trabajo completo le gustaría eso
<!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>tuscript.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]); } }