Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 23.08.2016, 08:58
malcomxcia malcomxcia ist offline
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