 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst So 10.07.2005 18:16
Titel [Javascript] Multiple form upload / input felder hinzufügen |
  |
|
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 
Vielleicht hat jemand von euch Lust, den Code zusammenzukürzen, und diese ganze Tabellenscheiße da rauszuschmeissen?  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 18:54
Titel
|
|
|
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ü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 = " 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ü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ü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ä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ä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 überschreitet zulässige Server-Größ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 überschreitet zulässige Formular-Gesamtgröß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 18:54, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
ploehr
Dabei seit: 19.12.2005
Ort: UelzCoast
Alter: 43
Geschlecht: 
|
Verfasst Mi 06.09.2006 14:40
Titel
|
|
|
|
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!
|
|
| |
   |
|
| |
|
|
| Ä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
|
|
|
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.
|
|
