| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| img { | |
| width: 100%; | |
| height: 200px; | |
| } | |
| input { | |
| width: 100%; | |
| height: 200px; | |
| } | |
| #output { | |
| font-family: -apple-system; | |
| font-size: 1em; | |
| } | |
| </style> | |
| <body> | |
| <div><img src="apple.gif"></img></div> | |
| <div><input id="input" type="file"></input></div> | |
| <div id="output"></div> | |
| </body> | |
| <script> | |
| input.addEventListener("change", () => { | |
| let file = input.files[0]; | |
| output.textContent = `${file.name} (${file.type})`; | |
| }); | |
| </script> |