Dateigröße mit Javascript überprüfen

Gibt es eine Möglichkeit, per Javascript eine Datei auf ihre Größe zu überprüfen, bevor sie hochgeladen wurde?

Hallo,

folgende Situation: Eine HTML/PHP-Seite, die ein Formular ausgibt. In diesem Formular besteht die Möglichkeit, eine Datei auf dem Computer auszuwählen und hochzuladen (<input type="file" />). Nun möchte ich, das Javascript überprüft, ob diese ausgewählte Datei eine vorgegebene Dateigröße überschreitet oder nicht, und falls ja per alertbox warnt. Und zwar bevor alles auf den Server hochgeladen wurde.

Zwar überprüft der PHP-Interpreter auf dem Server nachher auch, ob die Datei sich an die Bestimmungen hält (schon allein aus Sicherheitsgründen; auch wenn es mit Javascript klappen sollte könnte der Benutzer JS deaktivieren); jedoch möchte ich dem User die Wartezeit für das unnötige Hochladen einer zu großen Datei ersparen. Außerdem ist nach dem Hochladen auch nach einem Klick auf den Zurück-Button das Feld leer.

Also, gibt es so eine Möglichkeit?

Gruß,
Ahnenforscher

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 47624

Url: https://administrator.de/forum/dateigroesse-mit-javascript-ueberpruefen-47624.html

Ausgedruckt am: 16.05.2025 um 07:05 Uhr

9 Kommentare

Neuester Kommentar

Hi,
was löst man heute nicht in JS sondern in PHP!
Ja - sowas lässt mich mit PHP realisieren. Hier mal ein kl. Beispiel.

Formularcode:

....
Neue Datei hochladen: <input type='file' name='file' size='25'>  
....

Auswertung:

....
<?
 //Variabeln festlegen
  $max_byte_size = 8097152;
  $allowed_types = "(doc|pdf|xls|rtm|txt|ppt|html|htm|dot|pps|zip)";  
  $namedokument=$_FILES["file"]["name"];  
   
  //Wurde wirklich eine Datei hochgeladen?
  if(is_uploaded_file($_FILES["file"]["tmp_name"]))  
   {
    //Gültige Endung? ($ = Am Ende des Dateinamens) (/i = Groß- Kleinschreibung nicht berücksichtigen)
    if(preg_match("/\." . $allowed_types . "$/i", $_FILES["file"]["name"]))  
     {
      //Datei auch nicht zu groß
	  if($_FILES["file"]["size"] <= $max_byte_size)  
	   {
 	    //Alles OK -> Datei kopieren
		if(copy($_FILES["file"]["tmp_name"], "../shortnews/".$ordnername."/dokumente/".$namedokument))  
		 {
		  $verzeichnis="../shortnews/".$ordnername."/dokumente/".$namedokument;  
          echo "<span class='fliesstext'>Sie haben erfolgreich ein neues Dokument hochgeladen: <b>".$namedokument."</span></b>";  
         }
		else
		 {
		  echo "<span class='fliesstext'>Datei konnte nicht hochgeladen werden.</span>";  
		 }
	   }
	  else
	   {
		echo "<span class='fliesstext'>Die Datei darf nur eine Größe von " . $max_byte_size . " Byte besitzen.</span>";  
	   }
     }
	else
	 {
	  echo "<span class='fliesstext'>Die Datei besitzt eine ungültige Endung.</span>";  
     }
   }
  else
   {
    echo "<span class='fliesstext'>Keine Datei zum Hochladen angegeben.</span>";  
   }
...

Den Pfad wohin die Datei kopiert werden muss, solltest natürlich anpassen. Ganz oben hast du die Möglichkeit Dateitypen festzulegen!
Hier noch ne kl. Hilfe: http://aktuell.de.selfhtml.org/artikel/php/php-uploadcheck/

Gruß
Dani

Sorry Dani, aber du hast mich falsch verstanden: Das ganze wird mit PHP überprüft: Siehe mein Beitrag.

Nur zusätzlich möchte ich noch Javascript ans Werk lassen, um dem Benutzer unnötige Hochladezeit zu ersparen!

Gruß,
Ahnenforscher

Hi,

Nur zusätzlich möchte ich noch Javascript ans Werk lassen, um dem Benutzer unnötige Hochladezeit zu ersparen!

Klar..aber warum nochmal prüfen. Mein Scirpt prüft vor dem hochladen ob die Größe passt. Ansonsten kopiert dieses auch nichts auf den Server!

Gruß
Dani

Er will die Dateigröße schon vor einem Seitenwechsel überprüfen lassen. Nur weis ich leider nich wie das gehen soll und warum?

Mfg

Enclave

genau vor dem problem stehe ich auch grade... Ich würde gern direkt wenn der User den File auswählt die Filedaten auslesen. Um z.B. dem benutzer eine Information darüber zu geben wie lange der Upload ca dauert. Ich denke das kann eigentlich nur mit Javascript gehen.

Das Problem an eurer Lösung ist doch das wenn man die Datei per Formular absendet die Datei bereits in den Temporeren Ordner des Servers gelegt wurde und euer script nur den kopiervorgang auf dem Server stopt (der im algemeinen nicht lange dauert).

Momentan hab ich meinen Uploadscript so erstellt das er beim Upload per Javascript einfach das Formular ersetzt durch einen Ladebalken. Jetzt würde ich gerne dem User noch die Zeit anhand der Dateigröße angeben. Nur ich hab keinen blaßen schimmer wie ich die dateigröße ermittle noch vor dem Upload

Hi,
also du kannst die "if" - Abfrage auch früher abfragen (siehe Code oben). Also das dürfte doch noch machbar sein, oder?!

Grüße
Dani

     //Datei auch nicht zu groß
      if($_FILES["file"]["size"] <= $max_byte_size)  
       {
         //Alles OK -> Datei kopieren
        if(copy($_FILES["file"]["tmp_name"], "../shortnews/".$ordnername."/dokumente/".$namedokument)) //HIER WIRD DIE DATEI NUR AUS DEM TEMPORÄREN VERZEICHNIS RAUSKOPIERT. DER EIGENTLICHE UPLOAD PASSIERT BEIM KLICKEN AUF DEM ABSENDE BUTTON.  
         {
          $verzeichnis="../shortnews/".$ordnername."/dokumente/".$namedokument;  
          echo "<span class='fliesstext'>Sie haben erfolgreich ein neues Dokument hochgeladen: ".$namedokument."</span>";  
         }
        else
         {
          echo "<span class='fliesstext'>Datei konnte nicht hochgeladen werden.</span>";  
         }
       }
      else
       {
        echo "<span class='fliesstext'>Die Datei darf nur eine Größe von " . $max_byte_size . " Byte besitzen.</span>";  
       }

der code bringt mir überhaupt nichts... Was bringt es mir wenn der User 30 minuten ne 50 MB Datei hochläd, um dan später die Meldung vom Server zu bekommen das die Datei zu groß ist. Wie gesagt, der eigentliche Upload erfolg schon bereits bevor der Code oben ausgeführt wird. Die IF Abfrage hier, verhindert nur das die Datei aus dem temp. verzeichnis des Servers irgendwo anders hin kopiert wird, wenn diese zu groß ist.

@Dani
Ob das machbar ist?
lol, natürlich ist das machbar aber für mich, auf deutsch gesagt, scheiss egal. ich kann wohl ne if abfrage machen aber die würde wiegesagt nur die BEREITS hochgeladen datei auf ihre größe überprüfen. Das Bringt Ahnenforscher und mir absolut nichts...

Hallo JanMunch,

genau das was du realisieren willst, ist das was ich auch haben will: Die Dateigröße per Javascript zu überprüfen, bevor die Datei hochgeladen wurde. Ich habe versucht, Dani das verständlich zu machen, aber es hat nicht geklappt.

Mittlerweile glaube ich fast, dass man das mit Javascript gar nicht machen kann?

Gruß,
Ahnenforscher

G' Abend Jungs / Mädels,
also ich habe es gerade mit dem folgenden Code versucht:

<?php
if($_POST['submit']) {  
$max_byte_size = 152;
  $allowed_types = "(doc|pdf|xls|rtm|txt|ppt|html|htm|dot|pps|zip)";  
  $namedokument=$_FILES["file"]["name"];  
   
  //Wurde wirklich eine Datei hochgeladen?
  if(is_uploaded_file($_FILES["file"]["tmp_name"]))  
   {
    //Gültige Endung? ($ = Am Ende des Dateinamens) (/i = Groß- Kleinschreibung nicht berücksichtigen)
    if(preg_match("/\." . $allowed_types . "$/i", $_FILES["file"]["name"]))  
     {
      //Datei auch nicht zu groß
      if($_FILES["file"]["size"] <= $max_byte_size)  
       {
         //Alles OK -> Datei kopieren
        if(copy($_FILES["file"]["tmp_name"], $namedokument))  
         {
          $verzeichnis=$namedokument;
          echo "<span class='fliesstext'>Sie haben erfolgreich ein neues Dokument hochgeladen: ".$namedokument."</span>";  
         }
        else
         {
          echo "<span class='fliesstext'>Datei konnte nicht hochgeladen werden.</span>";  
         }
       }
      else
       {
        echo "<span class='fliesstext'>Die Datei darf nur eine Größe von " . $max_byte_size . " Byte besitzen.</span>";  
       }
     }
    else
     {
      echo "<span class='fliesstext'>Die Datei besitzt eine ungültige Endung.</span>";  
     }
   }
  else
   {
    echo "<span class='fliesstext'>Keine Datei zum Hochladen angegeben.</span>";  
   }
}
else
{
 echo "<form method='post' enctype='multipart/form-data'>";  
 echo "<input type='file' name='file'>";  
 echo "<input type='submit' name='submit' value='Hinzufügen'>";  
 echo "</form>";  
}

?>