2011/07/25

複数ローカルファイルの選択

入力で複数選択させるには、multiple属性を付けます。
本項執筆時点では、multiple属性はFirefoxのバージョン3.5以降、Safariの4以降、Chromeの3以降、Operaの11以降でないと正常に動作しないようです。


参加者:



参加者:<input type="text" name="text" list="names" multiple>
<datalist id="names">
    <option value="ウルトラマン">
    <option value="スーパーマン">
    <option value="すっぱマン">
    <option value="タロウ">
</datalist>

以下は入力属性のtypeでfileを指定した場合の例です。multiple属性を付けるとファイル選択一覧画面からShiftキーを押しながら複数ファイルを選択できるようになります。
HTML5ではjavascriptから選択されたファイルへのアクセスも簡単に行えます。
下の例は、ファイルを複数選択後にボタンを押すと選択したファイル名がjavascriptにより一覧表示されます。













<input type="file" name="files[]" id="file" multiple onchange="getFiles()"><br>
<span id="disp"></span>
<script type="text/javascript">
function getFiles() {
    var files = document.getElementById("file").files;
    var disp = document.getElementById("disp");
    disp.innerHTML = "";
    for(var i=0 ; i < files.length; i++) {
        var file = files[i];
        disp.innerHTML += file.name + " : " + file.size/1000 + " KB<br>";
    }
}
</script>

0 件のコメント:

コメントを投稿