利用Javascript检查电子文件是否存在

简介

在Web 开发和客户端开发中，经常需要检查文件是否存在。利用Javascript 可以很容易地实现文件检查功能，本文将介绍几种常见的检查电子文件是否存在的方法。

方法一：使用XMLHttpRequest对象

以下代码片段展示了如何利用 XMLHttpRequest对象检查文件是否存在:

function checkFileExists(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', url, false);
    xhr.send();
    return xhr.status !== 404;
}

// 调用该方法
console.log(checkFileExists('https://www.example.com/file.pdf'));

解释：该方法利用XMLHttpRequest 对象发送Http 异步请求，如果请求成功，返回HTTP 状态代码200，如果请求失败，返回一个HTTP 错误代码。如果文件存在，HTTP 请求会成功并且返回HTTP 状态代码200，反之则返回HTTP 错误代码。代码中的open()函数的第二个参数表示请求的URL地址，第三个参数表示该请求为同步请求，即必须等待请求完成以后才能执行下面的代码。

方法二：使用Fetch API

Fetch API 是在ES6 中引入的Web API, 允许我们进行网络请求和响应数据的处理，下面展示如何检查文件是否存在：

function checkFileExist(url) {
    fetch(url, { method: 'HEAD' })
      .then(function(response) {
          return response.ok;
      }).catch(function(error) {
          console.log("ERROR", error);
      });
}

// 调用该方法
console.log(checkFileExist('https://www.example.com/file.pdf'));

解释：该方法利用Fetch API 的Head方法，向服务器发送网络请求并指定请求方法为HEAD，由于HEAD方法只返回文件信息的头部分，因此不需要传输文件内容，适用于检查文件是否存在。如果文件存在，服务器会返回HTTP 状态代码200，而返回404代表文件不存在。如果请求成功，则Promise 对象会返回一个值为true的布尔表达式，反之则返回false。

方法三：使用JQuery库

以下代码片段展示了如何利用JQuery库检查文件是否存在：

function checkFileExists(url) {
    var result = false;
    $.ajax({
        url: url,
        type: 'HEAD',
        async: false,
        error:function() {
            result = false;
        },
        success:function() {
            result = true;
        }
    });
    return result;
}

// 调用该方法
console.log(checkFileExists('https://www.example.com/file.pdf'));

解释：该方法利用JQuery库的 $.ajax() 方法，发送HTTP 异步请求，指定请求方法为HEAD。如果请求成功，则success函数返回结果为true，否则通过error函数来返回false结果。

结论

本文介绍了三种检查电子文件是否存在的方法，包括利用XMLHttpRequest 对象，利用Fetch API 和利用JQuery库实现。以上方法都可以用于检查网站上的静态资源是否存在，选择何种方法取决于每个开发者自己的实际需求以及所熟悉的API和库。