ダイアログウィンドウを表示する
警告用のダイアログボックスを開く
■警告用のダイアログボックスを開く
警告用のダイアログボックスを表示します。
警告用のダイアログボックスを表示するには、alert()関数を使用します。
引数に、ダイアログに表示する文字列を指定します。
警告用ダイアログを表示する
alert("表示テスト");
デバッグ用にも使えるので便利です。
確認ボタン付きのダイアログボックスを開く
■確認ボタン付きのダイアログボックスを開く
確認ボタン付きのダイアログボックスを表示します。
確認ボタン付きのダイアログボックスを表示するには、confirm()関数を使用します。
引数に、ダイアログに表示する文字列を指定します。
確認ボタン付きのダイアログボックスを表示する
confirm("表示テスト");
■ボタンが押された結果を取得する
ダイアログの操作結果を取得するには、confirm() 関数の戻り値を使用します。
true であれば、「OK」ボタンが押された事がわかります。false であれば、「CANCEL」ボタンが押された事がわかります。
確認ボタン付きのダイアログボックスを表示して結果を得る
var check = confirm("表示テスト");
if(check){
console.log(" OK が押された");
}else{
console.log(" CANCEL が押された");
}
入力欄付きのダイアログボックスを開く
■入力欄付きのダイアログボックスを開く
入力欄付きのダイアログボックスを表示します。
入力欄付きのダイアログボックスを表示するには、prompt()関数を使用します。
第01引数に、ダイアログに表示する文字列を指定します。
第02引数に、入力欄にデフォルトで表示する文字列を指定します。
入力欄付きのダイアログボックスを表示する
prompt("表示テスト");
■ボタンが押された結果を取得する
ダイアログの操作結果を取得するには、prompt() 関数の戻り値を使用します。
null と等しければ、「CANCEL」ボタンが押された事がわかります。
それ以外であれば、「OK」ボタンが押された事がわかります。
入力欄付きのダイアログボックスを表示して結果を得る
var check = prompt("表示テスト");
if(check == null){
console.log(" CANCEL が押された");
}else{
console.log(" OK が押された:" + check);
}
ファイル参照のダイアログボックスを開く
■ファイル参照のダイアログボックスを開く
ファイル参照のダイアログボックスを表示するには、ファイル用の入力コントロールを使用します。
ユーザーがボタンを押すとファイルを開くダイアログボックスが表示されます。
ファイル用の入力コントロールを作成するには、input タグを作成し type 属性に "file" を指定します。
静的に作成する例です。
ファイル選択用コントロールを作成する
<html>
<body>
<input type="file">
</body>
</html>
動的に作成する例です。
ファイル選択用コントロールを動的に作成する
// input エレメントを作成
var input = document.createElement("input");
// タイプに file を指定
input.type = "file";
// body に登録
document.body.appendChild(input);
■ボタンが押された結果を取得する
ダイアログの操作結果を取得するには、 onchange イベントを使用します。
Input オブジェクトの value プロパティが偽であれば、「CANCEL」ボタンが押された事がわかります。
それ以外であれば、ファイルが選択された事がわかります。
静的に作成する例です。
ファイル選択用コントロールの結果を得る
<html>
<head>
<script type="text/javascript">
<!--
function InputFileChangeFunc(element){
if(element.value){
console.log(" OK が押された:" + element.value);
}else{
console.log(" CANCEL が押された");
}
}
-->
</script>
</head>
<body>
<input type="file" onchange="InputFileChangeFunc(this);">
</body>
</html>
動的に作成する例です。
ファイル選択用コントロールを動的に作成して結果を得る
// input エレメントを作成
var input = document.createElement("input");
// タイプに file を指定
input.type = "file";
// 変化があれば実行されるイベント
input.onchange = function(){
if(this.value){
console.log(" OK が押された:" + this.value);
}else{
console.log(" CANCEL が押された");
}
}
// body に登録
document.body.appendChild(input);
■ファイルの複数選択に対応する（HTML5 世代）
HTML 5 対応ブラウザであれば、input タグに multiple 属性を追加すると、ファイルの複数選択ができるようになります。（IE9 は未対応のようです）
HTML の記述例
<html>
<body>
<input type="file" multiple />
</body>
</html>
JavaScript の記述例
// input エレメントを作成
var input = document.createElement("input");
// タイプに file を指定
input.type = "file";
// 複数ファイルの選択に対応する
input.multiple = true;
// body に登録
document.body.appendChild(input);
■ファイルをアップロードする
こちらで解説しています。
■選択したファイルにアクセスする（HTML5 世代）
ブラウザが File API に対応している場合、File API を利用してファイルにアクセスすることができます。（IE9 は未対応のようです）
files プロパティに FileList オブジェクトが格納されています。
FileList オブジェクトは配列のように中身を取り出せます。
中には File オブジェクトが格納されています。
「ファイル選択用コントロール」で選択したファイルの情報を取得する
// input エレメントを作成
var input = document.createElement("input");
// タイプに file を指定
input.type = "file";
// 複数ファイルの選択に対応する
input.multiple = "file";
// 変化があれば実行されるイベント
input.onchange = function(){
// File API に対応している
if(window.File){
var num = this.files.length;
console.log("選択したファイル総数:" + num);
var i;
for(i=0;i < num;i++){
var file = this.files[i];
console.log("--- No." + i + " ---");
console.log("ファイル名:" + file.name);
console.log("ファイルサイズ:" + file.size);
console.log("ファイルの種類:" + file.type);
console.log("\n");
}
}
}
// body に登録
document.body.appendChild(input);
