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

[FRAGE] JQueri File-Upload

TecEye

TecEye

New member
JQuery File-Upload

So ich versuch mich erneut ans Uploaden eines Files via Jquery-Ajax

ich habe eine ajax.php, da sind mehrere actions drin unter anderem folgender:
Code: 
if($_POST['action']=="uploadImage"){
	echo "ANGEKOMMEN";
}
Da soll dann später die verarbeitung des Bildes rein.

So auf meiner Seite hab ich folgendes Form-Konstrukt
PHP: 
echo "<form id='upload_".$tab_nr."_".$code."' name='upload_".$tab_nr."_".$code."' style='display:inline;'>";
			echo "<div class='uploadCircle pointer' style='position:absolute; left:50%; margin-left:-50px; width:100px;height:100px;' onclick=\"$('input[name^=upload_file_".$tab_nr."_".$code."]').trigger('click');\">";
				echo "<span style='font-size:110px;margin-left:-5px;' class='icon-user'></span>";
			echo "</div>";
			echo "<input id='elm_news_img' name='upload_file_".$tab_nr."_".$code."' type='file' style='opacity:0;'><br />";
			echo "<input type='submit' value='Submit' />";
		echo "</form>";

und dazu das JS:
PHP: 
$(document).ready(function (e) {
		$("#upload_<?php echo $tab_nr;?>_<?php echo $code;?>").on('submit',(function(e) {
			e.preventDefault();
			//alert(new FormData(this));
			$.ajax({
				data: {action:'uploadImage', new FormData(this) },
				enctype: 'multipart/form-data',
				contentType: false,
				cache: false,
				processData:false,
				success: function(result){ alert(result); }
			});
		}));
	});

URL des AJAX ist vortdefiniert mittels $.ajaxSetup
so ich geht wahrscheinlich um die Passage data
Code: 
data: {action:'uploadImage', new FormData(this) },
lasse ich nur action drin, bekomme ich das Alert "ANGEKOMMEN" ist also alles richtig verknüpft
mach ich nur new FormData(this) gibts n leeres Alert, klar er findet ja nix in ajax.php
so mach ich aber beides rein, dann öffnet er mir meine seite komplett neu in einem neuen Tab und fürht gar nix aus?????
WAS DA LOS?

- - - Aktualisiert - - -

Hat wohl keiner eine Idee :/ mach ich denn was falsch beim Übermitteln von new FormData? wenn ich die in eine Variable stecke ist es auch kein Unterschied :(
 
Zuletzt bearbeitet:
OK hab mich der Thematik angenommen, laut deines Links muss ich mit append anhängen.
Mein JQ sieht jetzt so aus:
Code: 
$('form').submit(function(e){
		var data;
		data = new FormData();
		data.append('file', $('#file')[0].files[0]);
		data.append('action', 'uploadImage');
		$.ajax({
			data: data,
			processData: false,
			type: 'POST',
			contentType: 'multipart/form-data', 
			beforeSend: function (x){if(x && x.overrideMimeType){ x.overrideMimeType("multipart/form-data"); } },
			mimeType: 'multipart/form-data',
			success: function (data){ alert(data); }
		});
		e.preventDefault();
	});
wirft mir aber weiterhin ein leeres Alert raus. Häng ich falsch an?

Bei data: {action:"uploadImage"}, allerdings kommt das alert "ANGEKOMMEN" - also irgwndwie häng ich wieder falsch an :/

- - - Aktualisiert - - -

So es scheint mit folgender Einstellung zu funktionieren:
Code: 
$('form').submit(function(e){
		var fd;
		fd = new FormData();
		fd.append('file', $('#file')[0].files[0]);
		fd.append('action', 'uploadImage');
		$.ajax({
			data: fd,
			processData: false,
			contentType: false,
			success: function (result){ alert(result); }
		});
		e.preventDefault();
	});
Also es kommt auf jeden Fall ein Ergebnis.
So wär jemand so gut und könnte mir einen Tipp geben wie ich jetzt in meiner ajax.php die datei weiterverarbeiten kann?
mit $_POST['file'] und$_FILES['image_file'] gehts nicht :/

Sorry ich Fischkopf $_FILES['file'] muss es natürlich heißen :D so alles gut vielen dank ;)
 
Zuletzt bearbeitet:
TecEye schrieb:
Code: 
		data = new FormData();
		data.append('file', $('#file')[0].files[0]);
		data.append('action', 'uploadImage');
Zum Vergrößern anklicken....
das file musst/darfst/kannst du doch überhaupt nicht anhängen, das ist ja schon in dem formular enthalten

- - - Aktualisiert - - -

ach nee, das sehe ich jetzt erst, du übergibst das formular ja nicht an den konstruktor.
übergib das einfach an den konstruktor und hänge dann deine zusatzdaten mit append an.
 
hast du / jemand eine idee wie ich das führ mehrere dateien gleichzeitig mache, also multi html seitig ist das klar, aber wie verarbeite ich das? besser vor dem ajax und dann in schleife setzen und jedes file einzeln losschicken oder erst in der ajaxdatei selber?
 
TecEye schrieb:
hast du / jemand eine idee wie ich das führ mehrere dateien gleichzeitig mache
Zum Vergrößern anklicken....
nicht anders wie für 1 file


TecEye schrieb:
besser vor dem ajax und dann in schleife setzen und jedes file einzeln losschicken oder erst in der ajaxdatei selber?
Zum Vergrößern anklicken....
das verstehe ich nicht. was ist vor dem ajax oder in der ajaxdatei?
und mit schleife ist da nichts, formdataobjekt mit xmlhttprequest abschicken und gut
 
ja wegen derm maximalen upload, dachte ich den dateiarray vorher splitten und dann jede datei einzel zur ajax schicken, sonst sind 2MB schnell voll bei 2-3 Bildern
 
Keine Ahnung was ich mal wieder falsch mache
Hier so schick ichs auf html seite ab
PHP: 
echo "<form id='uploadMediathek_".$tab_nr."_".$code."' name='upload_".$tab_nr."_".$code."' style='display:inline;'>";
			echo "<input id='file_".$tab_nr."_".$code."' name='upload_file_".$tab_nr."_".$code."[]' multiple type='file' style='opacity:0;' onchange=\"$('#uploadMediathek_".$tab_nr."_".$code."').submit();\"><br />";
		echo "</form>";

so ist mein ajax
PHP: 
$('#uploadMediathek_<?php echo $tab_nr;?>_<?php echo $code;?>').submit(function(e){
		var fd;
		fd = new FormData();
		fd.append('file', $('#file_<?php echo $tab_nr;?>_<?php echo $code;?>')[0].files[0]);
		fd.append('action', 'uploadFile');
		$.ajax({
			data: fd,
			processData: false,
			contentType: false,
success: function (result){ alert(result); }
		});
		e.preventDefault();
	});

Das senden funktioniert, jetzt hab ich die ajax.php so umgebaut um auf multifiles zu reagieren, aber das scheint nicht zu funktionieren
PHP: 
if($_POST['action']=="uploadFile"){
$result = "";
	$i				= 0;
	foreach($_FILES as $file) :  
		foreach($file['name'] as $filename) :
			$file_name 			= $_FILES['file']['name'][$i];
			$result .= $file_name;
			++$i;
		endforeach; 
	endforeach;
echo $result;
}
 
OK verstanden, ist n array also so
PHP: 
for(var x=0;x<ins;x++){
			fd.append("file[]", document.getElementById('file_<?php echo $tab_nr;?>_<?php echo $code;?>').files[x]);
		}
funktioniert, danke :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben