Arrayüberprüfung mittels JQUERY

Purdey · 17. Juli 2011

Hallo Zusammen,

ich habe eine Array files[] welches seine Werte durch mehrere input type=file felder erhält

Füge ich eine Datei hinzu so wird danach das input Feld geklont
ich würde nun gern wenn möglich alle sich bereits im Array befindlichen Daten gegen den neu dazukommenden Filenamen prüfen und somit aus der Vorgabe:

1. Datei: 1.JPG
2. Datei: 3.JPG
3. Datei: 1.JPG

Beim hinzufügen von Datei 3 feststellen lassen und nen Fehler ausgeben, das die Datei bereits schon ausgewählt wurde. Könnt ihr mir sagen ob das möglich ist? Mir eventuell Hilfe & Tipps anbieten?

CPoly · 18. Juli 2011

Im Prinzip musst du doch nur das Array durchlaufen und die Namen prüfen. Das ganze in O

.

Javascript:

var newName = '1.JPG';

for(var i = 0; i < files.length; i++) {
    if(files[i] == newName) {
        alert('Bereits enthalten');
    }
}

Bei großen Arrays wird das ganze eventuell irgendwann langsam. Deshalb könntest du die Namen der Dateien parallel zum Array in einem Objekt merken.

Javascript:

//Das Objekt sollte parallel zum Array immer die aktuellen Namen enthalten
var names = {};
var files = [];

var newName = '1.JPG';

if(names[newName] === 1) {
    alert('Bereits enthalten');
} else {
    names[newName] = 1;
    files.push(newName);
}

Purdey · 18. Juli 2011

hallo CPoly vielen Dank für die schnelle Antwort, kann ich das auch zur Laufzeit machen?
Also ich wähle die Datei aus und schon sagt er das es net passt?

CPoly · 18. Juli 2011

Der erste Code den ich gepostet hab macht ja genau das. Den kannst du nach der Auswahl einer Datei ausführen und gucken ob diese bereits in dem Array ist.

Purdey · 18. Juli 2011

Ich habe den Code zu Testweise in mein bisheriges Projekt eingefügt:
Leider klappt es noch nicht, kannst du mal schauen?

Code:

<?php

//include_once('../../sessionhelpers.inc.php');

if($_POST['files'])
{

$array=$_POST['files'];
foreach($array as $files)
{



if(strlen($files)>0)
{
echo '<h3>'.$files.'<h3/>';
//$sql=mysql_query("insert into ticket_uploads (ticket_id, ticket_datei) values('666','$files')");

}
}



}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="reCopy.js"></script>
<script type="text/javascript">
$(function(){


$('.inputf:last').each(function(){
	$(this).bind('change', function() {
        var ext = $('.inputf:last').val().split('.').pop().toLowerCase();
	// Array gibt -1 zurück wenn das Element nicht gefunden wurde
	// gibt eine Zahl größer 0 zurück wenne es an der Stelle gefunden
	// Position 1 gibt 0 zurück, Position 2 gibt 1 zurück
	
	var erg = $.inArray(ext, ['gif','png','jpg','jpeg']);
	//alert(erg);


// Hier soll der Code testweise laufen
var newName = this.files[0].name;
 
for(var i=0; i < files.length; i++) {
    if(files[i] == newName) {
        alert('Bereits enthalten');
    }
}


	
    // Ist der Wert -1 nicht zulassen --> Element wurde nicht gefunden
	if (erg == -1) {
		alert("Datei wird nicht zugelassen");
		//Feld leeren
		$(this).val("");
	}

	// Ist der Wert größer --> Element wurde gefunden und wird zugelassen
	else if (ext > '-1') {
		alert("Datei wird zugelassen");
		
		var filesize=this.files[0].size;
        var maxfilesize=2621440;
		
			if (filesize > maxfilesize) {
			alert('Die gewählte Datei ist größer als die vorgabe für die Dateigröße');
			//Feld leeren
			$(this).val("");
			}
			else {
			alert('Die gewählte Datei und deren größe überschreiten das Limit nicht und werden zulassen.');

	// Zeige Link mehr Uploads an	
            $('a.add').css({visibility: "visible"},1000);
			} 



		
		
	}  
    
	else {
		alert("Datei wird nicht zugelassen");
	}	
			
			
	});

});



  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().fadeOut(function(){ $(this).remove() }); return false">-</a>';
$('a.add').relCopy({ append: removeLink});	
});



</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.remove {color:#cc0000; text-decoration:none;}
.add {color:#cc0000; text-decoration:none; visibility:hidden;}
.plus {}
.input{ border: solid 1px #006699; padding:0px; text-decoration:none;}

</style>
</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>
   <input type="submit" value="Senden" />
   
   </form>
</body>
</html>

CPoly · 18. Juli 2011

"this.files" und nicht "files". Außerdem "files[i].name" und nicht nur "files[i]"

Javascript:

for(var i=0; i < this.files.length; i++) {
    if(this.files[i].name == newName) {
        alert('Bereits enthalten');
    }
}

Purdey · 18. Juli 2011

Vielen Dank mit den Anpassungen passt es nur eine Kleinigkeit ist noch offen.
Wenn ich es jetzt ausführe sagt er mir jedes mal das die Datei "bereits enthalten" ist, selbst bei der ersten Datei, wie kann ich das noch umgehen?

CPoly · 18. Juli 2011

Naja, das Problem ist, dass die Datei ja tatsächlich in dem Array drin ist, also muss die Überprüfung immer wahr sein. Du müsstest also nebenher in einer weiteren Variablen alle tatsächlich akzeptierten Dateien speichern.

Setz bitte mal den Code in [ code=javascript ] tags und rück ihn korrekt ein. Dann bau ich dir das da rein.

Purdey · 18. Juli 2011

Ich hoffe das passt so, könnten wir das dann gleich noch an der richtigen Stelle einbasteln,
wenn es erfüllt ist soll es "weiter" gehen und der $('a.add').relCopy({ append: removeLink}); angezeigt werden, wenn nicht dann sollte das inputfeld gelert werden $(this).val("");

Javascript:

<?php

//include_once('../../sessionhelpers.inc.php');

if($_POST['files'])
{

$array=$_POST['files'];
foreach($array as $files)
{



if(strlen($files)>0)
{
echo '<h3>'.$files.'<h3/>';
//$sql=mysql_query("insert into ticket_uploads (ticket_id, ticket_datei) values('666','$files')");

}
}



}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="reCopy.js"></script>
<script type="text/javascript">
$(function(){


$('.inputf:last').each(function(){
	$(this).bind('change', function() {
        var ext = $('.inputf:last').val().split('.').pop().toLowerCase();
	// Array gibt -1 zurück wenn das Element nicht gefunden wurde
	// gibt eine Zahl größer 0 zurück wenne es an der Stelle gefunden
	// Position 1 gibt 0 zurück, Position 2 gibt 1 zurück
	
	var erg = $.inArray(ext, ['gif','png','jpg','jpeg']);
	//alert(erg);



var newName=this.files[0].name;

alert(newName);

for(var i=0; i < this.files.length; i++) {
    if(this.files[i].name == newName) {
        alert('Bereits enthalten');
    }
}
	
    // Ist der Wert -1 nicht zulassen --> Element wurde nicht gefunden
	if (erg == -1) {
		alert("Datei wird nicht zugelassen");
		//Feld leeren
		$(this).val("");
	}

	// Ist der Wert größer --> Element wurde gefunden und wird zugelassen
	else if (ext > '-1') {
		alert("Datei wird zugelassen");
		
		var filesize=this.files[0].size;
        //var maxfilesize=3145728;
        var maxfilesize=2621440;
		      
		//alert(filesize);
		//alert(maxfilesize);
		
			if (filesize > maxfilesize) {
			alert('Die gewählte Datei ist größer als die vorgabe für die Dateigröße');
			//Feld leeren
			$(this).val("");
			}
			else {
			alert('Die gewählte Datei und deren größe überschreiten das Limit nicht und werden zulassen.');

	// Zeige Link mehr Uploads an	
            $('a.add').css({visibility: "visible"},1000);
			} 



		
		
	}  
    
	else {
		alert("Datei wird nicht zugelassen");
	}	
			
			
	});

});



  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().fadeOut(function(){ $(this).remove() }); return false">-</a>';
$('a.add').relCopy({ append: removeLink});	
});



</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.remove {color:#cc0000; text-decoration:none;}
.add {color:#cc0000; text-decoration:none; visibility:hidden;}
.plus {}
.input{ border: solid 1px #006699; padding:0px; text-decoration:none;}

</style>
</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>
   <input type="submit" value="Senden" />
   
   </form>
</body>
</html>

CPoly · 18. Juli 2011

Viel Spaß. Dieses relCopy Plugin brauchst du auch nicht mehr.

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;
		
			var inputsWithSameFile = $('.inputf').filter(function() {
				return this.value === newName;
			});
		
			//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>

Arrayüberprüfung mittels JQUERY

Purdey

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Purdey

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Purdey

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Purdey

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Purdey

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Neue Beiträge