Bild-Upload mit Vorschau möglich?

N

nikek

Grünschnabel
Hallo,

ich bin grade so am basteln einer Datenbank zur verwaltung meiner CDs... da bin ich bei folgendem Prob angelangt:
Ich habe eine Erfassungsmaske für Titel & Co und möchte dort auch die Covers hochladen. In dieser Maske soll es also möglich sein, ein Bild hochzuladen und dann eine Vorschau drauf zu haben, wobei die Erfassungsmaske immer noch die gleiche bleibt. Aber erst wenn der User auf "Eintrag erstellen" drückt, wird das Bild endgültig Serverseitig gespeichert. Klar gibt es <input type="file">, aber ich weiss nicht, wie ich das dann mit der Vorschau realisieren kann, weil das Bild ja Clientseitig ist und noch nicht abgeschickt werden soll... Bin mir auch nicht sicher, ob das jetzt ein PHP-Prob ist oder eher JS?
Also, bin über jederlei Denkanstöße riesig dankbar.

mfg,
NikeK
 
Du kannst ja wenn auf Upload oder speichern gedrückt wird, das bild in seinem Tempörären Pfad anzeigen. Wenn dann auf speichern geklickt wird, dann kannste das Bild ja endgültig kopieren.

Gruß Mirko
 
Das brauchst du nichtmal.

Das geht ganz einfach per JavaScript. Du fragst alle 2 Sekunden per JS ab, ob sich das input Feld verändert hat. Falls ja, dann stelle in einem Div Feld dies dar:

Code: 
<script language="javascript">
var tmpVAR="";
var ObjTag=document.getElementById;
function showImage()
    {
        if(ObjTag("filefield").value!=="" && ObjTag("filefield").value!==tmpVAR)
            {
                  tmpVAR=ObjTag("filefield").value;
                  ObjTag("IMG").src=ObjTag("filefield").value;
            }
    }

window.setTimeout("showImage()",2000);
</script>

In diesem Sinne
 
Soweit so gut, Logik kapiert und auf jeden Fall schonmal ein großes Danke an dieser Stelle. Leider funst es aber noch nicht so wirklich.
Weiß, dass ich mich jetzt vielleicht wirklich doof anstelle und normalerweise ist das auch kein Prob für mich, aber hatte jetzt ca. 1/2 Jahr Auszeit und kriegs irgendwie nicht wirklich auf die Reihe mehr...

Code: 
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
   <script language="javascript">
  var tmpVAR="";
  var ObjTag=document.getElementById;
  
  function showImage()
  { if(ObjTag("cover").value!=="" && ObjTag("cover").value!==tmpVAR)
    { tmpVAR=ObjTag("cover").value;
      ObjTag("IMG_cover").src=ObjTag("cover").value;
    }
  }

  window.setTimeout("showImage()",2000);
</script>

</head>
<body onload="showImage();">
  <form>
   <table>
     <tr>
       <td>Cover hochladen:</td>
       <td style="text-align:left"><input type="file" name="cover"></td>
     </tr>
     <tr>
       <td></td>
       <td><div name="IMG_cover"></div></td>
     </tr>
   </table>
  </form>
</body>
</html>
 
Hallo versuche mal aus
Code: 
<div name="IMG_cover"></div>
das hier zu machen
Code: 
<div id="IMG_cover" name="IMG_cover"></div>
weiß es aber leider nicht genau da ich nich der JS Experte bin.
 
Sorry. Ich habe den Thread völlig aus den Augen verloren.
Zur Versöhnung hier der Code:

Code: 
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
   <script language="javascript">
  var tmpVAR="";
  var ObjTag=document.getElementById;
  
  function SetInterval()
  	{
		  window.setTimeout("showImage()",1000);
	}
  
  function showImage()
  	{ 
		
		  if(ObjTag("cover").value!=="" && ObjTag("cover").value!==tmpVAR)
			    { 
					tmpVAR=ObjTag("cover").value;
				    ObjTag("IMG_cover").src=ObjTag("cover").value;
			    }
		SetInterval();
			
	}

</script>

</head>
<body onload="SetInterval();">
  <form>
   <table>
     <tr>
       <td>Cover hochladen:</td>
       <td style="text-align:left"><input type="file" name="cover"></td>
     </tr>
     <tr>
       <td></td>
       <td><img src="" id="IMG_cover"></td>
     </tr>
   </table>
  </form>
</body>
</html>

In diesem Sinne
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück