標準的なHTML形式 File Input. を用いてユーザーのファイルにアクセスできます。
ユーザーが入力をタップすると、デバイス標準のファイル選択ダイアログからファイルを選択できます。選択したファイルはご使用のミニアプリによってアクセス可能となります。acceptプロパティからファイルタイプを指定することもできます。例えば、accept="image/*"を指定すれば、ユーザーは画像ファイルを選択しなければならなくなります。詳しくはMDNの File Input の項を参照してください
以下は、簡略なHTMLサンプルです
ファイル入力の例
<input type="file" accept="image/*" id="imageInput" />
ファイルのメタデータとファイルコンテンツには、次の通りJavaScriptからアクセスすることも可能です
document.getElementById("imageInput").onchange = (e) => {
var file = e.target.files[0]
// You can access meta-data about the file such as name and size
console.log(`name: ${file.name}, size: ${file.size}, type: ${file.type}`)
// You can show a preview of the file using Filereader.readAsDataURL
var reader = new FileReader()
reader.addEventListener("load", function () {
document.getElementById("imagePreview").src = reader.result;
}, false);
reader.readAsDataURL(file)
}
関連リンク
カメラの画像を要求する
ファイル入力では、デバイスのカメラまたはマイクの画像、動画、オーディオを要求することもできます。この場合はcapture="environment"などのcaptureプロパティを使用してください。詳細は Capture MDN Documentation を参照してください。
ユーザーのデフォルトカメラまたは録音アプリが起動し、ミニアプリに結果が返されます。
以下はサンプルです。
<!-- Capture image from the device's user facing camera -->
<input type="file" capture="user" accept="image/*">
<!-- Record video from the device's outward facing camera -->
<input type="file" capture="environment" accept="video/*">
<!-- Capture audio from device -->
<input type="file" capture="user" accept="audio/*">
関連リンク
