• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Upload ohne upload-Button mit bildanzeige

C

centauros

New member
Hallo liebe Forengemeinde,

ich habe da ein kleines Problem mit einem Upload-Script. Bin in Javascript ein totaler Anfänger.

Erreichen möchte ich das das Upload-Script bereits nach dem auswählen eines Fotos das Foto hochlädt, in einem Verzeichnis speichert und in einem neuen Fenster anzeigt.

Ich weiss allerdings nicht so wirklich wie ich das weiter realisieren kann. Hier meine Gehversuche:

HTML: 
<html>
	<head>
		<title>Bilderzuordnung</title>
		<script>
		function upload() {
		    var par = window.parent.document;
		    var num = par.getElementsByTagName('iframe').length - 1;
		    var iframe = par.getElementsByTagName('iframe')[num];
		    iframe.className = 'hidden';
		     
		    // Neues iframe anlegen
		    var new_iframe = par.createElement('iframe');
		    new_iframe.src = 'upload.php';
		    new_iframe.frameBorder = '2';
		    par.getElementById('iframe').appendChild(new_iframe);
		 
		    // Bild einfuegen
		    var list = par.getElementById('list');
		    var new_div = par.createElement('div');
		    var new_img = par.createElement('img');
		    //new_img.src = '../images/afrikanischer-loewe.jpg';
		    new_img.src='../images/'+new_img;
		    new_img.className = 'load';
		    new_div.appendChild(new_img);
		    list.appendChild(new_div);
		
		    // senden
		    var imgnum = list.getElementsByTagName('div').length - 1;
		    document.iform.imgnum.value = imgnum;
		    document.iform.submit();
		}
		</script>

	</head>
	<body>
	<form action="upload.php" method="post" name="iform" id="iform" enctype="multipart/form-data"> 
		<input type="file" name="uploaded_image" onchange="upload()"/>   
		<input type="submit" name="submit" value="Upload" />   
		
	</form>   

<table width="100%" height="100%" border="0" valign="top" class="kgsTable_upload">
<tr>
    <td colspan="2">
        <div id='iframe'>
            <iframe src='?insert=' frameborder='' scrolling='0'>
            </iframe>
            <img src="" name="img" id="img">
        </div>
        <div id='list'></div>
    </td>
</tr>
</table>		
		</body>
</html>

Ich würde mich freuen, wenn mir jemand dabei helfen würde das Script auszubauen.

Vielen Dank und viele Grüße
 
centauros schrieb:
ich habe da ein kleines Problem mit einem Upload-Script. Bin in Javascript ein totaler Anfänger.
Zum Vergrößern anklicken....
Da hast du dir aber einiges vorgenommen. Ich glaube das ist ein bisschen viel für einen Anfänger. (Bitte nicht falsch verstehen, ist nicht böse gemeint...)

Wo hängst denn genau, so wie ich das sehe wird die Funktion upload() bei Auswählen einer Datei aufgerufen. Anschließend wird ein IFrame erstellt und das Bild dadrin angezeigt. Wenn das getan wurde, wird das Formular abgeschickt. Jetzt müsstest du noch die Serverseitige Verarbeitung implementieren. D.h. Bild in Verzeichnis speichern und gespeicherte Bilder anzeigen. Dafür gibt/soll es die upload.php geben, oder?


Ich würde aber erstmal kleiner anfangen oder für dein Projekt was fertiges nehmen, z.B. jQuery File Upload Demo
 
Zuletzt bearbeitet:
Hi!
Vielen Dank für den Link.
Naja.....natürlich könnte ich fertige Produkte nehmen.
Aber

1.) Lerne ich nichts daraus
2.) Machen die Skripte nicht das was ich gerne möchte.

;-)

Ich würde mich freuen, wenn Du mir zu meinem Ziel verhelfen würdest.
 
Ja, das stimmt wohl...

Also, wo genau hängst du z.Z. fest? Hast du Serverseitige Verarbeitung schon fertig oder willst du erstmal nur das Clientseitige machen?
 
rico2009 schrieb:
Hast du Serverseitige Verarbeitung schon fertig oder willst du erstmal nur das Clientseitige machen?
Zum Vergrößern anklicken....

Hier bin ich ins Stocken geraten:
centauros schrieb:
Erreichen möchte ich das das Upload-Script bereits nach dem auswählen eines Fotos das Foto hochlädt, in einem Verzeichnis speichert und in einem neuen Fenster anzeigt.
Zum Vergrößern anklicken....

@centauros, nur zur Sicherheit: du weißt aber schon, dass man mit JS nichts auf einen Server hochladen hochladen und speichern kann, sondern man dafür ein serverseitiges Skript (z.B. PHP) braucht?!
 
Hab's Jungs.

Mein Gehirn kocht....aber ich hab's geschafft. :)
Danke Gentlemen....and Ladies....falls wer dabei war.

Bis zum nächsten Problem. :/

Viele Grüße aus Köln
 
Wenn das upload.php-Skript schon steht, kann man das mit einem Minimalaufwand an JS realisieren:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<form target="iframe" action="upload.php" method="post" enctype="multipart/form-data">
	<input type="file" name="file" onchange="this.form.submit()">
</form>
<iframe name="iframe"></iframe>
</body>
</html>
- die Anzeige des Bildes kannst du ja dann in der upload.php machen.

Der Fehler oben ist, dass du dem <form> kein passendes target-Attribut gegeben hast.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben