screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js Trigger/open input file on click button</h3> <input ref="fileInput" type="file" style="display: none;" @change="handleFileChange"> <button @click="openFileInput">Open File</button> </div> <script type="module"> const app = Vue.createApp({ methods: { openFileInput() { this.$refs.fileInput.click(); }, handleFileChange(event) { const selectedFile = event.target.files[0]; console.log(selectedFile) // Do something with the selected file } } }); app.mount('#app'); </script> <style> #app { width: 600px; margin: 20px auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .24); text-align: center; padding: 20px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } button:active { background-color: #003e80; } </style> </body> </html>