【JavaScript】ファイルの存在チェック(ネイティブ機能)【2023年最新版】

最新のファイルの存在チェック(ネイティブ機能)はこちら
【JavaScript】ファイルの存在チェック(ネイティブ機能)【2024年最新版】 (attacktube.com)

2023年現在、JavaScriptにおけるファイルの存在チェック方法は次の通り。
fetchメソッドとasync/awaitを使うとファイルの存在チェックを行うコードを書ける。
fetchメソッド: ES2015(ES6)で導入
async/await: ES2017(ES8)で導入

このコードはライブラリを使用せず、純粋なJavaScriptを使用して、指定されたファイルの存在を確認する。
ネイティブなJavaScriptの機能(fetch関数とasync/await)を利用して、指定されたファイルの存在を確認する。

const checkFileExistence = async function(url) {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch(url);
      if (response.status === 200) {
        console.log('ファイルは存在します。');
        // ファイルが存在する場合、resolve(0)で解決します
        resolve(0);
      } else {
        console.log('ファイルは存在しません。');
        // ファイルが存在しない場合、reject(1)で拒絶する。
        reject(1);
      }
    } catch (error) {
      console.error('エラーが発生しました:', error);
      // エラーの場合reject(error)を返す
      reject(error);
    }
  });
};

const imageUrl = 'http://localhost/test13/001.jpg';

const main = async function() {
  try {
    const ret = await checkFileExistence(imageUrl);
    if (ret === 0) {
      console.log('OK ret = ' + ret);
    } else {
      console.log('NG ret = ' + ret);
    }
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
};

main();

$.ajax()メソッドを使った古いファイル存在チェック方法は下記である。
JavaScriptの覚書 | ワクガンス (amaraimusi.sakura.ne.jp) ExternalLink

• 
• Tweet

• JavaScript