Arrayüberprüfung mittels JQUERY

EDIT:

im Firefox 4 klappt alles, im IE 9 kann ich leider nur eine Datei hochladen und im GoogleChrome zählt er nicht die Dateien hoch, woran könnte das liegen?

Hi nochmals vielen Dank ist echt schick und auch ohne das JS Plugin nur leider ist inputsWithSameFile.size() immer null, da das Script an dieser Stelle nicht klappte habe ich nochmals paar Daten in einer alert() ausgeben lassen dabei scheint inputsWithSameFile.size() immer "0" zu sein. Ansonsten ist es echt perfekt. Schon mal danke sehr!

Lässt sich dieser kleine Fehler noch finden?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Upload form</title>
</head>

<body>
	<form method="post" action="">
		<p class="clone"><input type="file" name="files[]" class="inputf" /></p>
		<p><a href="#" class="add" rel=".clone">+</a></p>
		<p><input type="submit" value="Senden" /></p>
	</form>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function () {
		//Neues input hinzufügen
		var btnAdd = $('.add').hide().click(function(e) {
			e.preventDefault();
			
			var last = $('.clone:last');
			var clone = last.clone().find(':input').val('').end().filter(':not(:has(.remove))').append('<a class="remove" href="#">-</a>').end();
			
			last.after(clone);
			
			$(this).hide();
		});
		
		//Input löschen
		$('.remove').live('click', function(e) {
			e.preventDefault();
			
			$(this).parent().fadeOut(function(){
				$(this).remove()
			});
		});
		
		
		//Alle erlaubten Dateiendungen
		var extensions = ['gif', 'png', 'jpg', 'jpeg'];
	
		//Maximale Dateigröße
		var maxFilesize = 2621440;
	
		//change-event für alle jetzigen und Zukünftigen Elemente binden
		$('.inputf').live('change', function() {
		
			var ext = this.value.split('.').pop().toLowerCase();
		
			//Dateiendung prüfen
			if( $.inArray(ext, extensions) === -1 ) {
				alert('Dateiendung nicht zugelassen');
			
				this.value = '';
				return;
			}
		
			//Dateigröße prüfen
			if( this.files[0].size > maxFilesize ) {
				alert('Datei zu groß');
			
				this.value = '';
				return;
			}
		
			//Prüfen ob bereits vorhanden
			var newName = this.files[0].name;
		
                        alert(newName);                        


			var inputsWithSameFile = $('.inputf').filter(function() {

                        alert(this.value);
				return this.value === newName;
			});
		
                       alert(inputsWithSameFile.size());


			//Wenn es mehr als ein input mit der gleichen Datei gibt (eines gibt es ja mindestens ;) )
			if(inputsWithSameFile.size() > 1 ) {
				alert('Datei bereits ausgewählt');
			
				this.value = '';
				return;
			}
			
			//Wenn noch leere file-inputs da sind, bleibt der add-button unsichtbar
			if( $('.inputf[val=]').size() > 0 ) {
				btnAdd.hide();
			} else {
				btnAdd.show();
			}
			
			//Alle Prüfungen sind erfolgreich durchlaufen
			alert('Datei wird akzeptiert!');
		});
	});
	/* ]]> */
	</script>

</body>

</html>
 
Zuletzt bearbeitet:
Ich hätte das vielleicht von Anfang an sagen sollen. Das Arbeiten mit dem file-input in JavaScript ist ein Krampf. Manche Browser lassen keinen Zugriff auf das value Attribut zu, also funktioniert das Leeren nicht. Des weiteren ist das "files" Objekt etwas HTML5 spezifisches, das heißt die Überprüfung von Dateigröße und Duplikaten funktioniert auch nicht in jedem Browser. (Siehe "File API" http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)#Related_specifications)



Vielleicht hilft es dir ja, wenn ich dich auf Alternativen Hinweise:
http://www.plupload.com/
http://swfupload.org/
 
Hi vielen Dank für die viele und gute Arbeit, naja gut hauptsächlich soll es ja im Firefox laufen, daher sollte es passen. Zwar etwas schade aber der Code läuft im FF ja richtig prima. Ist damit zu rechnen, das andere Browser mal nach ziehen werden?
 
Purdey hat gesagt.:
Ist damit zu rechnen, das andere Browser mal nach ziehen werden?
Zum Vergrößern anklicken....

Ja, früher oder später.

Wenn es dir nur um neuere Browser geht, dann solltest du das mal testen. Jetzt kannst du direkt mehrere Dateien mit einem input auswählen.

HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Upload form</title>
</head>

<body>
	<form method="post" action="">
		<p><input type="file" name="files[]" class="inputf" multiple="multiple" /></p>
		<p><input type="submit" value="Senden" /></p>
	</form>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück