1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Formulare / Felder für Datei-Upload</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Formularelemente definieren, mit deren Hilfe der Anwender eine Datei auf seinem lokalen Dateisystem auswählen kann, um sie mit dem Formular zu übertragen.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Formulare, Datei-Buttons, Datei-Upload, File-Upload, <input>, type=, maxlength=, accept=, enctype=, value=">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/formulare/datei_upload.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Formulare == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Formulare</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Felder für Datei-Upload</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#definieren"><b>Felder für Datei-Uploads definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="definieren">Felder für Datei-Upload definieren</a></h2>
<p>Diese Sorte Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular zu übertragen. Wenn ein CGI-Script die ankommenden Formulardaten auf dem Server-Rechner verarbeitet, ist es dadurch möglich, dem Anwender das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermöglichen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/input_file.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Schicken Sie uns was Schickes!</h1>
<form action="input_file.htm" enctype="multipart/form-data">
<p>
W&auml;hlen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
<input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
</p>
</form>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><input type="file"></code> definieren Sie ein Element für Datei-Upload (<i>input = Eingabe, file = Datei</i>). Der Web-Browser sollte dann ein Eingabefeld anzeigen, das die Eingabe einer Datei (in den meisten Fällen mit Pfadnamen) erlaubt. Rechts daneben sollte der Browser einen Button anzeigen, bei dessen Anklicken ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint. Die Größe des Eingabefeldes (Anzahl Zeichen) können Sie mit <code>size=</code> bestimmen (<i>size = Größe</i>).</p>
<p>Wenn Sie das Attribut <code>maxlength=</code> angeben, sollte der Web-Browser die dahinter notierte Zahl als maximal erlaubte Dateigröße in Bytes interpretieren (<i>maxlength = maximal length = maximale Länge</i>). Im obigen Beispiel wird auf diese Weise die die Bytezahl auf 100000 Byte begrenzt. Wenn Sie <code>maxlength=</code> weglassen, kann der Anwender beliebig große Dateien senden. Beachten Sie jedoch, dass diese Angabe mit Vorsicht zu genießen ist. In der HTML-Version 3.2 wurde es so bestimmt, in der Version 4.0 wird diese Funktionalität beim <code>maxlength</code>-Attribut dagegen nicht mehr erwähnt. Verlassen Sie sich also nicht auf diese Angabe. Sicherer ist es, bei der Weiterverarbeitung mit einem CGI-Script im Script die Dateigröße zu ermitteln und das Script davon abhängig entscheiden zu lassen, ob die Datei akzeptiert oder verworfen wird.</p>
<p>Wenn Sie nur bestimmte Dateitypen zulassen wollen, können Sie mit der Angabe <code>accept=</code> die erlaubten Dateitypen eingrenzen (<i>accept = akzeptieren</i>). Hinter dem Istgleichzeichen können Sie einen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/mimetypen.htm"><b>Mime-Type</b></a> angeben. Dabei ist auch das Wildcardzeichen (<code>*</code>) bei Subtypen erlaubt. Im obigen Beispiel werden mit <code>text/*</code> alle Textdateien akzeptiert. Dazu gehören reine Textdateien (<var>*.txt</var>), aber z.B. auch HTML-Dateien (<var>*.html</var>,<var>*.htm</var>). Verlassen Sie sich aber auch bei dieser Angabe nicht darauf, dass der Browser das tatsächlich prüft vor dem Versenden des Formulars.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Wichtig ist, dass Sie im einleitenden <code><form></code>-Tag die Angabe <code>enctype="multipart/form-data"</code> notieren, wenn das Formular ein Element für Datei-Upload enthält.</p>
<p>Im Online-Angebot von SELFHTML aktuell finden Sie einen Feature-Artikel, der beschreibt, wie das server-seitige Verarbeiten solcher Datei-Uploads aussehen kann:<br>
<img src="../../src/serverdok.gif" width="15" height="10" border="0" alt="Online-Seite"> <a target="_top" href="http://selfaktuell.teamone.de/artikel/cgiperl/file-upload/index.htm"><b>Fileupload per Perl/CGI</b></a><br>
Um den das dort beschriebene CGI-Script zu verstehen, benötigen Sie allerdings Kenntnisse in <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../cgiperl/index.htm"><b>CGI/Perl</b></a>.</p>
<p>Mit dem Attribut <code>value=</code> in Verbindung mit <code><input type="file"></code> können Sie das Feld mit einem Wert vorbelegen, z.B. <code>value="C:\autoexec.bat"</code>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#input"><b>Element-Referenz</b></a> für Input-Formularelemente (<code><input></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#input"><b>Attribut-Referenz</b></a> für Input-Formularelemente (<code><input></code>)</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="versteckte.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="versteckte.htm"><b>Versteckte Elemente</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="klickbuttons.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="klickbuttons.htm"><b>Klickbuttons</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Formulare</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
