mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 07:36 Benutzername: Passwort: Auto-Login

Thema: [Javascript] Multiple form upload / input felder hinzufügen vom 10.07.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [Javascript] Multiple form upload / input felder hinzufügen
Autor Nachricht
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst So 10.07.2005 17:16
Titel

[Javascript] Multiple form upload / input felder hinzufügen

Antworten mit Zitat Zum Seitenanfang

Ich habe hier zwei Codebeispiele für euch. Sinn ist ein Dateiuploadformular, dem man mit Javascript weitere Dateiuploadfelder anfügen kann. Bei den Beispielen unten mangelt es aber an folgenden Dingen:

* Das eingefügte Feld soll den Namen "Datei[]" tragen, damit man es dann in php weiterverarbeiten kann. Ich brauche keine hochnummerierung.

* Es soll im JS eine Maximalanzahl festlegbar sein.

* Ich brauche keine Tabellen, ich hab mein CSS Lächel

Vielleicht hat jemand von euch Lust, den Code zusammenzukürzen, und diese ganze Tabellenscheiße da rauszuschmeissen? <-- Schuld! Ich würde euch dann auch den fertigen JS/PHP Code zur Verfügung stellen hier im Thread.

Code:


<HTML>
<HEAD>
<SCRIPT>
var f = 0;
function addInput () {
  if (document.all || document.getElementById) {
    var table = document.all ? document.all.formElems :
      document.getElementById('formElems');
    var row = table.insertRow(++f);
    if (document.all) {
      var cell = row.insertCell(0);
      cell.innerHTML =
        '<INPUT TYPE="file" NAME="fileName' + f + '"'
        + ' ONCHANGE="addInput()">';
      cell = row.insertCell(1);
      cell.innerHTML =
        '<INPUT TYPE="button" VALUE="select another file"' +
        ' ID="addButton' + f + '"' +
        ' ONCLICK="addInput();">';
      document.all['addButton' + (f - 1)].outerHTML = '';
    }
    else {
      var cell = row.insertCell(0);
      var input = document.createElement('INPUT');
      input.setAttribute('type', 'button');
      input.id = 'addButton' + f;
      input.value = 'select another file';
      input.onclick = function () { addInput(); };
      cell.appendChild(input);
      cell = row.insertCell(1);
      input = document.createElement('INPUT');
      input.setAttribute('type', 'file');
      input.name = 'fileName' + f;
      input.onchange = function () { addInput(); };
      cell.appendChild(input);
      var oldButton = document.getElementById('addButton' + (f - 1));
      oldButton.parentNode.removeChild(oldButton);
    }
  }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName"
      METHOD="post"
      ENCTYPE="multipart/form-data"
      ACTION="whatever"
>
<TABLE ID="formElems">
<TR>
<TD>
<INPUT TYPE="file" NAME="fileName0">
</TD>
<TD>
<INPUT ID="addButton0" TYPE="button" VALUE="select another file"
       ONCLICK="addInput()"
>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="submit">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>



sowie: http://www.archanapatchirajan.com/remove.html
 
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Mo 11.07.2005 17:54
Titel

Antworten mit Zitat Zum Seitenanfang

Ihr findet hier:
- Das html Formular
- Javascript in die Datei einzubinden, die das html Formular beinhaltet
- php Datei, Ziel des action-attributes des Formulars.

Pfade sind anzupassen, eigentlich jeweils nur am Anfang der Dateien. chmod des Uploadverzeichnisses notwendig.

Code:

         <form name="form" id="form" enctype="multipart/form-data" action="upload.php" method="post" onsubmit="return validate();">
         <table border="0" cellspacing="2" cellpadding="2" id="dateiupload">
            <tr id="row">
               <td width="1" colspan="2"><input type="file" size="40" name="uploadfile[]" /></td>
            </tr>
         </table>
         <table border="0" cellspacing="2" cellpadding="2">
            <tr>
               <td><a href="#" onClick="AddRowsToTable();return false;">Weitere Datei hinzuf&uuml;gen</a></td>
   
               <td><input type="submit" name="submit" value=" Dateien hochladen " /></td>
            </tr>
         </table>
         </form>         


Code:

function validate(){
 var theForm = document.form;
 var isError = true;
 for(i=0;i<theForm.elements.length;i++) {
  if( (theForm.elements[i].type).toLowerCase()=="file" && trim(theForm.elements[i].value)!="") {
      isError=false;
     }
 }
 if(isError) alert("Bitte mindestens eine Datei auswählen!");
 return !isError;
}

function trim(str) {
 return str.replace( /^\s*/, '').replace( /\s*$/, '' );
}

function AddRowsToTable() {
 var tbl = document.getElementById('dateiupload');
 var lastRow = tbl.rows.length;
 var iteration = lastRow;   
 if (iteration < 5) {   
   var row = tbl.insertRow(lastRow);
 
   var cellRight = row.insertCell(0);
   var el = document.createElement('input');
   el.setAttribute('type', 'file');
   el.setAttribute('name', 'uploadfile[]');

   el.setAttribute('size', '40');
   cellRight.setAttribute('id',iteration)
   cellRight.appendChild(el);
   var aa = document.createElement("a");
   aa.setAttribute('href', '#');
   var clickName = new Function("DeleteRow(this)");
   aa.onclick = clickName;
   aa.innerHTML = "&nbsp;entfernen";
   cellRight.appendChild(aa);
 } else {
   alert('Maximal 5 Dateien gleichzeitig zugelassen.');
 }
}
function DeleteRow(x)
{
     while (x.tagName.toLowerCase() !='tr')
     {
          if(x.parentElement)
             x=x.parentElement;
        else if(x.parentNode)
             x=x.parentNode;
        else
             return;
     }
     var rowNum=x.rowIndex;
     while (x.tagName.toLowerCase() !='table')
     {
          if(x.parentElement)
             x=x.parentElement;
        else if(x.parentNode)
             x=x.parentNode;
        else
             return;
     }
     x.deleteRow(rowNum); 
}

function RemoveRowFromTable(rowid) {
 var tbl = document.getElementById(iteration);
 //var lastRow = tbl.rows.length;
 //if (lastRow > 1)
 tbl.deleteRow(rowid);
}


Code:

$maxDirSize = 50; # in Megabytes
$Email = 'mail@mail.de'; # Email to notify about upload and send URLs
$mailbody = '<html><head></head><body>';
$dirName = 'user/dateiupload'; # absoluter Pfad ohne Anfangs- / mit chmod 777
$maxUploadSize = 15; # mb
$detectExtensions = '';
$acceptedExtensions = 'jpg|jpeg|png|gif|zip|rar';

$accept_ANY    = 1;   // Any files are allowed to be uploaded (For security, the default is 0)

$accept_jpg    = 1;   // jpeg image files
$accept_gif    = 1;   // gif  image files
$accept_png    = 1;   // png  image files
$accept_bmp    = 0;   // bmp  image files
$accept_xbm    = 0;   // xbm  image files
$accept_tiff   = 0;   // tiff image files
$accept_ico    = 0;   // icon image files
$accept_html   = 0;   // html document files
$accept_pdf    = 0;   // pdf  document files
$accept_rtf    = 0;   // rtf  document files
$accept_txt    = 0;   // txt  document files
$accept_mp3    = 0;   // mp3  audio files
$accept_wav    = 0;   // wav  audio files
$accept_midi   = 0;   // midi audio files
$accept_aiff   = 0;   // aiff audio files
$accept_au     = 0;   // au / snd audio files
$accept_avi    = 0;   // avi  video files
$accept_mpeg   = 0;   // mpeg video files
$accept_zip    = 0;   // zip  compressed files
$accept_gzip   = 0;   // gzip compressed files





///////////////////////////////////////////
// Detecting server type and domain name //
///////////////////////////////////////////

   $domName     = str_replace('www.','',$_SERVER['SERVER_NAME']);
   $moveToDir = $_SERVER['DOCUMENT_ROOT'].$dirName;

if (!file_exists($moveToDir))  die ('<h2>** CONFIGURATION ERROR **</h2><p>Directory location does not exist:</p><p>'.$moveToDir.'</p>');
if (!is_writeable($moveToDir)) die ('<h2>** CONFIGURATION ERROR **</h2><p>Permissions error (CHMOD).</p><p>Please set write permissions to:<br />'.$moveToDir.'</p>');

///////////////////////////////////////
// Collecting acceptable file types  //
///////////////////////////////////////

$acceptedFileTypes    = array();
$acceptedFileTypesKey = array();
if ($accept_jpg ) {
   array_push($acceptedFileTypes,'image/jpeg','image/pjpeg');
   array_push($acceptedFileTypesKey,'jpeg');
}
if ($accept_gif ) {
   array_push($acceptedFileTypes,'image/gif');
   array_push($acceptedFileTypesKey,'gif');
}
if ($accept_png ) {
   array_push($acceptedFileTypes,'image/png','image/x-png');
   array_push($acceptedFileTypesKey,'png');
}
if ($accept_bmp ) {
   array_push($acceptedFileTypes,'image/bmp');
   array_push($acceptedFileTypesKey,'bmp');
}
if ($accept_xbm ) {
   array_push($acceptedFileTypes,'image/xbm','image/x-xbitmap');
   array_push($acceptedFileTypesKey,'xbm');
}
if ($accept_tiff) {
   array_push($acceptedFileTypes,'image/tiff');
   array_push($acceptedFileTypesKey,'tiff');
}
if ($accept_ico ) {
   array_push($acceptedFileTypes,'image/x-icon','image/ico');
   array_push($acceptedFileTypesKey,'ico');
}
if ($accept_html) {
   array_push($acceptedFileTypes,'text/html');
   array_push($acceptedFileTypesKey,'html');
}
if ($accept_pdf ) {
   array_push($acceptedFileTypes,'application/pdf');
   array_push($acceptedFileTypesKey,'pdf');
}
if ($accept_rtf ) {
   array_push($acceptedFileTypes,'text/richtext','text/rtf');
   array_push($acceptedFileTypesKey,'rtf');
}
if ($accept_txt ) {
   array_push($acceptedFileTypes,'text/plain');
   array_push($acceptedFileTypesKey,'txt');
}
if ($accept_mp3 ) {
   array_push($acceptedFileTypes,'audio/mpeg','audio/mp3');
   array_push($acceptedFileTypesKey,'mp3');
}
if ($accept_wav ) {
   array_push($acceptedFileTypes,'audio/wav','audio/x-wav');
   array_push($acceptedFileTypesKey,'wav');
}
if ($accept_aiff) {
   array_push($acceptedFileTypes,'audio/aiff','audio/x-aiff');
   array_push($acceptedFileTypesKey,'aiff');
}
if ($accept_au  ) {
   array_push($acceptedFileTypes,'audio/basic','audio/au','audio/snd');
   array_push($acceptedFileTypesKey,'au','snd');
}
if ($accept_midi) {
   array_push($acceptedFileTypes,'audio/mid','audio/midi');
   array_push($acceptedFileTypesKey,'mid');
}
if ($accept_avi ) {
   array_push($acceptedFileTypes,'video/avi','video/x-msvideo');
   array_push($acceptedFileTypesKey,'avi');
}
if ($accept_mpeg) {
   array_push($acceptedFileTypes,'video/mpeg','video/mpg');
   array_push($acceptedFileTypesKey,'mpeg');
}
if ($accept_zip ) {
   array_push($acceptedFileTypes,'application/x-zip-compressed','application/zip');
   array_push($acceptedFileTypesKey,'zip');
}
if ($accept_gzip) {
   array_push($acceptedFileTypes,'application/x-gzip-compressed','application/x-gzip','application/gzip');
   array_push($acceptedFileTypesKey,'gz');
}

// Check if acceptable file types have been defined
if (!count($acceptedFileTypes) && !$upload_ANY)   die ('<h2>** CONFIGURATION ERROR **</h2><p>No acceptable file types have been configured.</p>');

/////////////////
// File Upload //
/////////////////

if ($_FILES['uploadfile'] && count($_FILES['uploadfile']['tmp_name'])>0) {

   // Parsing acceptable extensions
   if ($detectExtensions) {
      $acceptedExtensions = str_replace('.','',$acceptedExtensions);
      $acceptedExtArray = explode('|',$acceptedExtensions);
   }

   function usernotify($Email) {
      global $mailbody;
      $header = "From: Dateiupload <$Email>\n";
      $header .= "Reply-To: $Email\n";
      $header .= "X-Mailer: PHP/" . phpversion(). "\n";         
      $header .= "X-Sender-IP: $REMOTE_ADDR\n";
      $header .= "Content-Type: text/html";
      $mailbody = '<p>Auf Ihrer Website fand ein Dateiupload statt. Folgende Dateien wurden geladen:</p>' . nl2br($mailbody);
      mail($Email,'Dateiupload',$mailbody,$header);
   }
   
   
   function dirsize($dir){
      $totalsize=0;
      $handle = @opendir($dir);
      while ($file = @readdir ($handle)){
         if (eregi("^\.{1,2}$",$file))
            continue;
         if (!is_dir($dir.$file)) {
            $size=filesize($dir.$file);
            $totalsize=$totalsize+$size;
         }
      }
      @closedir($handle);
      return($totalsize);
   }

   function echoSuccessRow($nr,$fn,$er){
      global $mailbody, $dirName;
      echo "<p>Upload erfolgreich f&uuml;r Dateinummer $nr $fn: $er </p><br />";
      $mailbody .= '<p><a href="http://www.'.$_SERVER['SERVER_NAME'].'/'.$dirName.'/'.$fn.'">http://www.'.$_SERVER['SERVER_NAME'].'/'.$dirName.'/'.$fn.'</a></p>';
   }

   function echoFailedRow($nr,$fn,$er){
      echo "<p>Upload fehlerhaft f&uuml;r Dateinummer $nr $fn: $er </p><br />";
   }

   ///////////////////////////////
   // Processing Uploaded Files //
   ///////////////////////////////
   for ($k=0;$k<count($_FILES['uploadfile']['tmp_name']);$k++) {
      if ($_FILES['uploadfile']['name'][$k]=='') continue;

      $uploadFileNum = ($k+1).'.';

      // Striping tags and invalid characters from uploaded filename
      $uploadFileName = str_replace(array('|','<','>','"','\'',':','\\','/','*','?'),'',strip_tags($_FILES['uploadfile']['name'][$k]));

      // Checking if uploaded file contains no data - file size is 0 bytes
      if (dirsize($moveToDir.'/') > ($maxDirSize * 1024 * 1024)) {
         echoFailedRow($uploadFileNum,$uploadFileName,'Serververzeichnis ist voll. Bitte versuchen Sie es zu einem anderen Zeitpunkt erneut.');
         unset($_FILES['uploadfile']['tmp_name'][$k]);
         continue;
      }
      
      if (filesize($_FILES['uploadfile']['tmp_name'][$k])==0) {
         echoFailedRow($uploadFileNum,$uploadFileName,'Datei war 0 Byte.');
         unset($_FILES['uploadfile']['tmp_name'][$k]);
         continue;
      }

      // Detecting uploaded file for an acceptable extension
      if ($detectExtensions){
         $tmp = explode('.',$uploadFileName);
         if (count($tmp)==1) $uploadFileExt = '';
         else $uploadFileExt = $tmp[count($tmp)-1];
         if (!in_array($uploadFileExt,$acceptedExtArray)){
            echoFailedRow($uploadFileNum,$uploadFileName,'Datei dieses Typs nicht zul&auml;ssig: .'.$uploadFileExt);
            continue;
         }
      }

      // Uploaded file error checking
      switch ($_FILES['uploadfile']['error'][$k]){
            case 0:
                if (is_uploaded_file($_FILES['uploadfile']['tmp_name'][$k])) {
               // Checking if uploaded file is an acceptable file type
               if (!$accept_ANY && !in_array($_FILES['uploadfile']['type'][$k],$acceptedFileTypes)) {
                  echoFailedRow($uploadFileNum,$uploadFileName,'Datei dieses Typs nicht zul&auml;ssig: '.$_FILES['uploadfile']['type'][$k]);
                  continue 2;
               }
               // Moving uploaded file to the configured destination directory
                    $moveufile = move_uploaded_file($_FILES['uploadfile']['tmp_name'][$k],$moveToDir.'/'.$uploadFileName);

               // Checking if the move was successful
                 if ($moveufile) {
                  echoSuccessRow($uploadFileNum,$uploadFileName,'Dateiupload erfolgreich.');
                        continue 2;
                 } else echoFailedRow($uploadFileNum,$uploadFileName,'Fehler beim verschieben der Datei in das Zielverzeichnis auf dem Server.');
              } else echoFailedRow($uploadFileNum,$uploadFileName,'Datei ist keine hochgeladene Datei.');
                break;
         case 1:
            echoFailedRow($uploadFileNum,$uploadFileName,'Datei &uuml;berschreitet zul&auml;ssige Server-Gr&ouml;ße von '.ini_get('upload_max_filesize').'.');
                break;
         case 2:
            $mfs = $_POST['MAX_FILE_SIZE'];
            if ($mfs >= 1048576) $fsize = number_format($mfs/1048576,2).'MB';
            else $fSize = number_format($mfs).'KB';
            echoFailedRow($uploadFileNum,$uploadFileName,'Datei &uuml;berschreitet zul&auml;ssige Formular-Gesamtgr&ouml;ße von '.$fSize.'.');
                break;
         case 3:
            echoFailedRow($uploadFileNum,$uploadFileName,'unterbrochener Dateiupload.');
                break;
         case 4:
                break;
            default:
            echoFailedRow($uploadFileNum,$uploadFileName,'Ein unbekannter Fehler trat auf.');
                break;
      }
   }
}

///////////////////////////////////
// Detecting Maximum Upload Size //
///////////////////////////////////
$umf = intval(ini_get('upload_max_filesize'));
$pms = intval(ini_get('post_max_size'));
if ($umf > $pms) $maxSize = $pms;
else $maxSize = $umf;
if ($maxSize > $maxUploadSize) $maxSize = $maxUploadSize;

$mailbody .= '</body></html>';
usernotify($Email);


Der code ist zum Teil nur von mir angepasst. Leider ist mir die Quelle nicht bekannt.


Zuletzt bearbeitet von am Mo 11.07.2005 17:54, insgesamt 1-mal bearbeitet
 
Anzeige
Anzeige
ploehr

Dabei seit: 19.12.2005
Ort: UelzCoast
Alter: 36
Geschlecht: Männlich
Verfasst Mi 06.09.2006 13:40
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank für das skript, ich kanns gut brauchen. wen ich es schaffe (mit meinen minimalen javascript-kenntnissen) die tabelle zu ersetzen, werde ich das hier posten!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Vista + IE 7: Input Felder
Input-Felder/Eingabefelder im Responsive Design
Nicht übertragene input-Felder anzeigen lassen auf Website
Multiple Javascript Cookies
[solved]CSS Problem im IE bei form input und label
[Javascript] Inputfelder hinzufügen / entfernen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.