input type="file"で選択したファイルの拡張子を取得して、指定した拡張子でない場合はアップロードできないようにしたい場合があります。
以下のように、選択したファイルパスの末尾を正規表現でチェックします。
拡張子の大文字、小文字を区別せずに判定するため、toUpperCaseで大文字に変換してからチェックをしています。
CSVの部分をチェックしたい大文字の拡張子に変更すれば任意の拡張子をチェックできます。
<input type="file" id="file1" />if (!document.getElementById('file1').value.toUpperCase().match(/\.(CSV)$/i)) {
console.log('CSVファイルの形式（拡張子）が違います。');
}WEBアプリでプッシュ通知を実装する方法を紹介します。googleが紹介している以下のページを参考にしました。ウェブアプリへのプッシュ通知の追加 | Web | Google Develope...
WEBアプリでプッシュ通知を実装するでWEBアプリでプッシュ通知を実装する手順を紹介しましたが、ここでは逆にプッシュ通知削除する方法を紹介します。先のページで紹介したように、ページロード時に以下のよう...
webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...
Dockerコンテナ内でwebpack-dev-serverを起動して、ホスト側からアクセスを可能にする方法を紹介します。以下のように、webpack-dev-serverのオプションにhost: 0...
Dockerコンテナ内でwebpack-dev-serverを起動して、別のコンテナのnginxと連携する方法を紹介します。以下のような構成でコンテナを使用している場合を考えます。webコンテナはng...
Vue.jsで、ドラッグ＆ドロップで表示順を入れ替える方法を紹介します。まずは以下のように、v-forでリスト形式で一覧表示します。以下ではフルーツ（fruits）の一覧を表示しています。dataをそ...
ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で...
TypeScriptのプロジェクトでAPIをコールする際に使用するfetchの処理をエラーハンドリングなども含めて共通処理として実装します。まずはAPIからのレスポンスの共通の型を定義します。「正常時...
TypeScript fetchの共通処理を実装するでfetchの共通処理を作成しましたが、これはAPIからのレスポンスの形式があっている前提で処理を行っています。例えば以下はAPIのレスポンスの型は...
TensorFlow.jsの学習済みモデルを使って画像分類を行う方法を紹介します。今回はMobileNetというライブラリ（学習済みモデル）を使用します。https://github.com/tens...