HTMLDOM入力FileUploadオブジェクト
HTML DOM入力FileUploadオブジェクトは、HTMLドキュメントの
入力FileUploadオブジェクトを作成する方法を見てみましょう-
構文
以下は構文です-
var fileUploadBtn = document.createElement(“INPUT”); fileUploadBtn.setAttribute(“type”,”file”);
プロパティ
以下は、HTMLDOM入力ファイルアップロードオブジェクトのプロパティです-
| プロパティ | 説明 |
|---|---|
| 受け入れる | 入力ファイルアップロードボタンのaccept属性の値を返し、変更します。 |
| オートフォーカス | 入力ファイルのアップロードボタンがページの読み込み時に自動的にフォーカスされるかどうかを返し、変更します。 |
| 無効 | 入力ファイルアップロードボタンのデフォルト値を返し、変更します。 |
| defaultValue | 入力ファイルアップロードボタンのaccept属性の値を返し、変更します。 |
| ファイル | 入力ファイルアップロードボタンで選択されたすべてのファイルを参照するファイルリストオブジェクトを返します。 |
| フォーム | ファイルアップロード入力ボタンを囲むフォームの参照を返します。 |
| 複数 | ユーザーが複数のファイルを選択できるかどうかを返し、変更します。 |
| 名前 | 入力ファイルアップロードボタンのname属性の値を返し、変更します。 |
| 必須 | 入力ファイルアップロードボタンの必須属性の値を返し、変更します。 |
| タイプ | 入力ファイルアップロードボタンのtype属性の値を返し、変更します。 |
| 値 | 入力ファイルアップロードボタンのvalue属性の内容を返し、変更します。 |
例
HTMLDOM入力ファイルアップロードオブジェクトの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
}
</style>
</head>
<body>
<h1>DOM Fileupload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Click me to create an input file upload button</button>
<script>
function createFileBtn() {
var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");
document.body.appendChild(fileUploadBtn);
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「青」をクリックします 」ボタンをクリックして、ファイルアップロードボタンを作成します。
-
HTMLDOM入力ファイルアップロードオートフォーカスプロパティ
HTML DOM Input FileUpload autofocusプロパティは、InputFileUploadが最初のページ読み込みにフォーカスされているかどうかを設定/返します。 構文 以下は構文です- ブール値を返す-true/false inputFileUploadObject.autofocus オートフォーカスをbooleanValueに設定する inputFileUploadObject.autofocus = booleanValue ブール値 ここでは、「booleanValue」 次のようになります- booleanValue 詳細 t
-
HTMLDOM入力リセットオブジェクト
HTML DOM入力リセットオブジェクトは、タイプ「reset」の要素に関連付けられています。 createElement()メソッドとgetElementById()メソッドをそれぞれ使用して、タイプがリセットされた入力要素を作成してアクセスできます。 プロパティ 以下は、入力リセットオブジェクトのプロパティです- プロパティ 説明 オートフォーカス ページが読み込まれたときにリセットボタンが自動的にフォーカスを取得するかどうかを設定または戻すには。 defaultValue リセットボタンのデフォルト値を設定または戻すには。 無効 リセットボタンが無効になっ