MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. ファイル入力

ファイル入力

Vue.js
2024.05.25

ファイル入力は、ユーザーがファイルを選択しそのファイルを表示または処理します。

ファイル入力
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ファイル入力について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <input
          type="file"
          @change="handleFileUpload"
          id="file_input"
          class="file-input"
        />
        <p v-if="selectedFile">選択されたファイル: {{ selectedFile.name }}</p>
      </div>
    </div>

    <!-- CDN -->
    <script src="CDN用URL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成
Vue.createApp({
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      // ファイル選択時の処理
      this.selectedFile = event.target.files[0];
    },
  },
}).mount("#app");
/* ファイル入力フィールドのスタイル */
#file_input {
  border: 1px solid #ccc;
  padding: 10px;
  width: 500px; /* 横幅を広く設定 */
}

.file-input {
  font-size: 16px;
  margin: 10px 0;
}
出力結果

選択されたファイル: {{ selectedFile.name }}

Vue.js