Arrayüberprüfung mittels JQUERY @ tutorials.de: Tutorials, Forum & Hilfe

Purdey · 17.07.11 22:07

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.07.11 11:58

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

Code 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.

Code 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.07.11 18:49

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.07.11 18:59

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.07.11 19:13

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

<?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.07.11 19:42

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

Code javascript:

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

Purdey · 18.07.11 19:55

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.07.11 21:03

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 [javascript] tags und rück ihn korrekt ein. Dann bau ich dir das da rein.

Purdey · 18.07.11 21:12

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("");

Code 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.07.11 22:23

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

HTML-Code:

<!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>

Purdey · 18.07.11 23:14

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-Code:

<!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>

***CPoly*** · 19.07.11 10:07

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/Compari...specifications)

Vielleicht hilft es dir ja, wenn ich dich auf Alternativen Hinweise:
http://www.plupload.com/
http://swfupload.org/

Purdey · 19.07.11 10:54

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?

***CPoly*** · 19.07.11 11:39

Zitat von Purdey

Ist damit zu rechnen, das andere Browser mal nach ziehen werden?

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-Code:

<!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>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

PHP Array mittels JQuery ausgeben

Formularverarbeitung im Hintergrund +File Upload / jquery /jquery.valitation

[jQuery-dataTables] jQuery dataTable erstellen mit DB-Einträgen

[jQuery] - Selektor Prinzip bzw. Struktur von jQuery nachbilden

jQuery: jQuery auf AJAX Response anwenden

Stichworte

E-Mail:

Abonnieren Abbestellen