zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Bilder Upload ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.08.2016, 08:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2010
Beiträge: 6
malcomxcia befindet sich auf einem aufstrebenden Ast
Standard Bilder Upload ?

Guten Morgen erst mal ! ! !

Ich hab ein Script für nen Bilder Upload ausm Netz. Das funktioniert soweit auch alles. Sobald ich aber ein das Script erweitere für ein 2tes Bild klappts nicht mehr.

Egal welchen Button ich wähle, ändert er mir immer Bild 2

Hier mal der Code:

HTML-Code:
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div class="col-md-6 col-xs-6" id="image_preview"><img id="prev_1" src="img/noimage.jpg" /></div>
<div class="col-md-6 col-xs-6" id="image_preview2"><img id="prev_2" src="img/noimage.jpg" /></div>
<hr id="line">
	<div class="col-md-6 col-xs-6" style="margin-top:20px;" id="selectImage"><input class="upload" type="file" id="file" required /></div>
	<div class="col-md-6 col-xs-6" style="margin-top:20px;" id="selectImage"><input class="upload" type="file" id="file_2" required /></div>
</div>
<h4 id='loading' >loading..</h4>
<div id="message"></div>

<div class="modal-hinweis modal fade " id="warn" tabindex="-1" role="dialog" aria-hidden="true">
    <div>Bitte füllen Sie alle Felder aus</div>
</div>

Code:
$(document).ready(function (e) {
		$("#uploadimage").on('submit',(function(e) {
		e.preventDefault();
		$("#message").empty();
		$('#loading').show();
		$.ajax({
		url: "upload_proof.php", // Url to which the request is send
		type: "POST",             // Type of request to be send, called as method
		data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
		contentType: false,       // The content type used when sending data to the server.
		cache: false,             // To unable request pages to be cached
		processData:false,        // To send DOMDocument or non processed data file it is set to false
		success: function(data)   // A function to be called if request succeeds
		{
		$('#loading').hide();
		$("#message").html(data);
		}
		});
		}));
		
		// Function to preview image after validation

		
		
		
		$(function() {
		$("#file").change(function() {
		$("#message").empty(); // To remove the previous error message
		var file = this.files[0];
		var imagefile = file.type;
		var match= ["image/jpeg","image/png","image/jpg"];
		if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
		{
		$('#prev_1').attr('src','noimage.png');
		$("#message").html("<p id='error'>Falsches Bildformat</p>"+"<h4>Achtung</h4>"+"<span id='error_message'>Bitte verwenden Sie nur Bilder mit der Endung jpeg, jpg and png</span>");
		return false;
		}
		else
		{
		var reader = new FileReader();
		reader.onload = imageIsLoaded;
		reader.readAsDataURL(this.files[0]);
		}
		});
		});
		function imageIsLoaded(e) {
		$("#file").css("color","green");
		$('#image_preview').css("display", "block");
		$('#prev_1').attr('src', e.target.result);
		$('#prev_1').attr('width', '150px');
		$('#prev_1').attr('height', '138px');
		};
		
		
		
		$(function() {
		$("#file_2").change(function() {
		$("#message").empty(); // To remove the previous error message
		var file = this.files[0];
		var imagefile = file.type;
		var match= ["image/jpeg","image/png","image/jpg"];
		if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
		{
		$('#prev_2').attr('src','noimage.png');
		$("#message").html("<p id='error'>Falsches Bildformat</p>"+"<h4>Achtung</h4>"+"<span id='error_message'>Bitte verwenden Sie nur Bilder mit der Endung jpeg, jpg and png</span>");
		return false;
		}
		else
		{
		var reader = new FileReader();
		reader.onload = imageIsLoaded;
		reader.readAsDataURL(this.files[0]);
		}
		});
		});
		function imageIsLoaded(e) {
		$("#file_2").css("color","green");
		$('#image_preview2').css("display", "block");
		$('#prev_2').attr('src', e.target.result);
		$('#prev_2').attr('width', '150px');
		$('#prev_2').attr('height', '138px');
		};
		
				
});
Gruß und lieben Dank schon mal im voraus
Malcom
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.08.2016, 10:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Und was ist jetzt genau deine Frage? "Funktioniert nicht" ist weder eine Frage noch eine Fehlerbeschreibung.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.08.2016, 11:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2010
Beiträge: 6
malcomxcia befindet sich auf einem aufstrebenden Ast
Standard

Guten Morgen

Gütiger Gott das hab ich ganz vergessen. Sorry !

Bzw. war eigentlich meine Frage .....

Zitat:
Egal welchen Button ich wähle, ändert er mir immer Bild 2
Hab ja unterschiedlich ID's vergeben, aber er ändert mir immer nur Bild 2

Malcom
Mit Zitat antworten
  #4 (permalink)  
Alt 24.08.2016, 12:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das ist immer noch keine Frage sondern nur eine Aussage.
Was sagt die Dokumentation zu deinem Skript dazu? Was sind die nötigen Parameter die das Skript erwartet um zu funktionieren? Wie schaut der Code für deinen funktionierenden Upload aus? Was hast du dann genau geändert?
Hinweis: Ein Script besteht nicht nur aus IDs sondern auch aus Funktionen, etc. Die dürfen natürlich auch nicht doppelt definiert werden. Setze dir mit dem Firebug Haltepunkte in deinem Code damit du siehst, wann zu welchem Punkt gesprungen wird
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
bilder upload und einfügen in eine html/css spalten layout oooppptti Serveradministration und serverseitige Scripte 0 10.07.2008 18:32
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 09:57
Problem mit WordPress und dem Bilder Upload Maxefix Serveradministration und serverseitige Scripte 0 19.12.2006 15:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:42 Uhr.