Bild aus einem Input mit Javascript anzeigen?

Ich würde gerne, dass man eine Datei hochlädt und mit einem Button dann auf der Seite anzeigen lassen kann. Ich habe schon etwas rum probiert und es kommt immer nur " [object HTMLImageElement] " raus.

Mein Code ist dieser:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function anzeigen() {

            let bild = new Image();
            bild.src = document.getElementById("input");

            document.getElementById("bild").innerHTML = bild;

        }


    </script>
</head>
<body>
    <input type="file" accept="image/png, image/jpg" id="input">
    <input type="button" onclick="anzeigen();">
    <div id="bild">



    </div>
</body>
</html>

Das hochladen von Dateien funktioniert perfekt. Nur wird das Bild nicht angezeigt.

(Bin Anfänger)

Danke für eure Hilfe^^

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

HermCrafter

15.08.2021, 13:15

Hallo,

Hier ein kleines Beispiel:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .hidden {display: none;}
        </style>
    </head>
    <body>
        <input type="file" accept="image/png, image/jpeg" id="input">
        <button type="button">Bild anzeigen</button>
        <div class="image hidden"></div>
        <script>
            const input = document.querySelector('#input');
            const image = document.querySelector('.image');
            input.addEventListener('change', e => {
                const file = input.files[0];
                if(file.type.match('image/*')) {
                    const fileReader = new FileReader();
                    fileReader.addEventListener('load', e => {
                        const img = document.createElement('img');
                        img.setAttribute('src', e.target.result);
                        image.appendChild(img);
                    });
                    fileReader.readAsDataURL(file);
                }
            });
            const button = document.querySelector('button');
            button.addEventListener('click', e => {
                image.classList.toggle('hidden');
            });
        </script>
    </body>
</html>

Für Rückfragen und eventuelle Unklarheiten stehe ich gerne zur Verfügung.

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

15.08.2021, 08:55

das problem ist , du hast jetzt in input nach auswahl einer datei , noch gar nciht die datei eingelesen sondern einfach nur der browserlogik gesagt, diese datei darf genutzt werden .

du kannst die datei natürlich einlesen und dann als source geben .

https://coderwall.com/p/jzdmdq/loading-image-from-local-file-into-javascript-and-getting-pixel-data

oder auch

https://w3collective.com/preview-selected-img-file-input-js/

will man das auf dem server speichern dann eh mit server script verarbeiten

Ähnliche Fragen

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zur Frage

Einkaufsliste JavaScript mehrere Einträge?

Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.

Tut mir leid für die dummen variablen Namen xD

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <input type="text" name="kaufen" id="test">
    <button id="btn">Hinzufügen</button>
    <ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
 hinzufügenbtn.addEventListener("click", function(){
   const add =  document.getElementsByName("kaufen")[0].value;
    const  tt = document.getElementById("list").innerHTML = add;
 })
</script>
</body>
</html>

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

HTML BILD HOCHLADEN UND ANZEIGEN LASSEN?

Hi.

Ich möchte eine Seite mit HTML erstellen, welche einen UPLOAD Button enthält, der das hochgeladene Bild unendlich oft (oder 1000 mal) untereinander anzeigt.

Mein Code im Moment ist dieser.

Mein momentanes Problem: Ich hab keine Ahnung wie ich das Bild unten anzeigen lasse :/.

Danke im Vorraus

<html>
    <head>
        <title>INFINITIZER</title>
        <meta></meta>
    </head>
    <body>
    
        <div id="header">
            <hr color="red"/>
            <center>
                <h1><font color="red" face="Impact">INFINITIZER</font></h1>
            <hr color="red"/>
            </center>
        </div>
    
    
        <div id="upload">
            <center>
                
                    <form method="post" enctype="multipart/form-data">
                        <label>CHOOSE A PICTURE
                            <input name="datei" type="file" size="50" accept="video/*,image/*">&nbsp;
                        </label>&nbsp;&nbsp;
                        
                        <button>SEND</button>
                    </form>
                    
            </center>
        </div>
        
        
        <div id="pic">
            <img src="datei" alt="No picture">
        </div>
        
    </body>

</html>

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Was funktioniert mit meinem Java Script/html code nicht?

Ich versuche gerade eine einfache Passwortabfrage mit Javascript zu programmieren. Ihr müsst mir auch nicht erst sagen das ich es lieber mit php machen sollte, ich weiß dass das überall steht aber das kapier ich überhauptnicht. Hier ist mein code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            let rightpass = 'hallo';
            let inpu = document.getElementById(input);
            let dkfjl = inpu == rightpass;
            function passwortabfrage() {
                if (dkfjl) {
                    alert('Es hat geklappt')
                } else {
                    alert('failed')
                }
            }
        </script>
    </head>
    <body>
        <form>
        <input type="text" id="input" >
        <input type="submit" onclick="passwortabfrage()">
        </form>
    </body>
</html>

Es geht mir dabei im Moment nicht um Sicherheit, sondern nur darum zu wissen wie was nicht funktioniert. Viele Grüße und Danke für eure Antworten

...zur Frage

HTML-Formular funktioniert nicht richtig,warum?

Schönen Abend euch allen.

Ich lerne gerade über HTML und wollte gerade ein Formular schreiben.

Als Vorlage verwende ich das Tutorial. Bis zu Minute 10:32 habe ich alles genauso wie in dem Tutorial geschrieben.

Jedoch als im Tutorial dann Enter gedrückt wird und in der Adresszeile der Pfad und Benutzername=&Passwort=Passwort und ich genau dasselbe mache wird bei mir oben in der Adresszeile nichts angezeigt und auch das Passwort-Feld wird nicht "geleert".

Mein Code bis jetzt:

<!DOCTYPE html>
	<head>
	<html lang="de">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width", initial-scale=1.0>
		<title>Daten über dich</title>
	</head>
	<body>
		<form action="" method="GET"> 
			<label for="Name">Name: </label>
			<input id="Name" name="Name" type="text">
			<br>
			<br>
			<label for="Passwort">Passwort: </label>
			<input id="Passwort" name="Passwort" type="password">
		</form>
	</body>
</html>

Danke im Voraus an alle !

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

html/css box neben box bekommen?

Bekomme mit diesem code meine box in die andere box. will sie aber ausserhalb der box haben:

<!DOCTYPE html>
<html lang="de">
<head>
<title>Spezialitäten</title>
<meta charset="UTF-8"/>
<style type="text/css">
h1 {
font-size: 80px;
text-align: left;
color: red}
.hauptbox {
background-image: url(1783.jpg);
background-size: cover;
width: 1500px;
height: 600px;
border: solid;
}
.banner {
height: 200px;
border: solid;
margin: 25px;
width: 1450px;
}
.link {
width: 206px;
height: 300px;
border: solid;
float: right;
color: white;
A:active {color:red};
}
</style>
</head>
<body bgcolor="lightblue">
<div class="hauptbox">
<div class="banner">
<h1>Gdddd</h1>
</div>
<div class="link"
<a name="suche"><h4>Zurück zum Anfang</h4></>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen