HTML5　〜　HTML5で既存のinputタイプに加わった6つの変更点を試してみる②

HTML5

前回のエントリーでは、６つの変更点のうち、３つを試した。
今回は残りの３つを試した結果をメモする。

http://wbs-newworld.appspot.com/html5studyMarkup.html

これは、inputタイプのaccept属性にMIMEタイプを指定することで、アップロード時に選択できるファイルを限定する機能だ。例えば、次のように書く。

下記ボタンは画像ファイル以外を選択できないようにしている。<br>
<input type="file" name="imageFile" accept="image/*" value="画像ファイルのみ選択可能"><br>
下記ボタンはHTMLファイル以外を選択できないようにしている。<br>
<input type="file" name="imageFile" accept="text/html" value="htmlファイルのみ選択可能"><br>

http://wbs-newworld.appspot.com/html5studyMarkup.html

fileタイプのfilesプロパティは、アップロードするために選択したファイルをJavaScriptで扱えるようにするためのプロパティ。
例えば、次のコードでは選択したファイル名をalertで表示する。

<script>
$(document).ready(function(){
 $("#handledFile").click(function(){
  var uploadedFileObj = document.getElementById("files");
  var files = uploadedFileObj.files;
  for(var i = 0; i < files.length; i++){
    alert(files[i].name);
  }
 });
});
</script>
<html>
 <input type="file" name="File"  id="files" multiple="true"><br>
 <input type="button" value="上記で選択したファイル名を表示" id="handledFile">
</html>

http://wbs-newworld.appspot.com/html5studyMarkup.html

form内に、複数のsubmitボタンを配置することができる。

<form method="POST">
  お名前:<input name="name" required>
  年齢:<input type="number" min="20" max="150" name="age" required>
  <input type="submit" formaction="/addPerson" value="追加">
  <input type="submit" formaction="/deletePerson" formnovalidate value="削除">
</form>