Opplasting av filer i Forms
Grunnformen er slik:
HTML-fragmentet er slik:
<fieldset style="width:300px;padding:20px">
<legend>upload en tekstfil</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post"
enctype="multipart/form-data">
<div>
<input type="file" name="minfil" size="40" accept="text/*"/>
</div>
<div>
<input type="submit" value="Send"/>
</div>
</form>
</fieldset>
Vi ser at feltet gir opphav til både et tekst-felt og en browser knapp.
Her må vi bruke metoden: post.
accept
Det er mulig å bruke attributten accept som brukes til å angi hva slags filer som vil aksepteres av tjeneren. Verdien er lovlige MIME-typer. F.eks. vil accept="text/*" godta MIME-typer: text/plain, text/html osv. Dersom accept ikke brukes vil alle filtyper ansees lovlige.
Hvordan kan vi kontrollere at det vi sender virkelig er riktig mime-type ? Ideelt sett skulle nettleseren kontrollere dette, men det er ikke alltid tilfelle. Vi kan forsøke med litt javakode.
HTML-fragmentet er slik:
<fieldset style="width:350px;padding:15px">
<legend>upload en tekstfil</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post"
enctype="multipart/form-data">
<div>
<input accept="text/*" name="minfil" id="minfil" size="40" type="file"/>
</div>
<div>
<input id="sender" type="submit" value="Send"/>
</div>
</form>
<div id="message"> </div>
</fieldset>
<script>document.getElementById('minfil').addEventListener('change', control, false);</script>
og javaskriptet er slik
function control(evt)
{
var msg=document.getElementById('message');
var sender=document.getElementById('sender');
msg.innerHTML='';
if(!evt.target.accept)
{
sender.style.display='block';
return;
}
var a=evt.target.accept.split('/');
var files = evt.target.files;
var b=files[0].type.split('/');
// compare what we want with what we got
if ((a[0] == b[0]) &&
((a[1] == b[1])||(a[1]=='*')||(b[1]=='*')))
{
sender.style.display='block';
}
else
{
msg.innerHTML='feil fil type, vil ha: '+evt.target.accept;
sender.style.display='none';
}
}
multiple
HTML5 tillater mutiple filer
Et enkelt eksempel uten accept-kontroll(, og mot et serverskript som ikke gjør det beste ut av saken)
HTML-fragmentet er slik:
<fieldset style="width:300px;padding:20px">
<legend>upload flere bildefiler (jpg, png,gif)</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post"
enctype="multipart/form-data">
<div>
<input type="file" id="files" multiple="" name="files[]" size="40" accept="image/*"/>
</div>
<div id="message3"> </div>
<div>
<input type="submit" onclick="return control(this.form);" value="Send"/>
</div>
</form>
</fieldset>
<script>document.getElementById('files').addEventListener('change', handleFileSelect2, false)</script>
og javaskriptet er slik
function handleFileSelect2(evt) {
var files = evt.target.files;
var T='';
// check on type may be done here
for (var i = 0, f; f = files[i]; i++) {
T+='<li>'+f.name+'('+f.type+') : '+ f.size+'bytes </li>';
}
document.getElementById('message3').innerHTML = '<ul>' + T + '</ul>';
}
