How Can I Check for a Server File's Existence Using jQuery or JavaScript?

How to Ascertain the Existence of a Server File Using jQuery or JavaScript

Checking for the presence of a server file is a common task in web development. jQuery and JavaScript offer straightforward solutions to accomplish this:

jQuery Method:

jQuery uses an Ajax request with the HEAD method, which sends a request to the server to retrieve metadata about the file without actually downloading its content. If the server returns an error (e.g., 404), the file doesn't exist; otherwise, it does.

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function() {
        //file not exists
    },
    success: function() {
        //file exists
    }
});

Pure JavaScript Method (without jQuery):

This method uses the XMLHttpRequest object to send a HEAD request. A status code of 404 indicates that the file doesn't exist; any other status code suggests its existence.

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

Updated Approach for Asynchronous Execution:

Since synchronous XMLHttpRequest is deprecated, an asynchronous utility method can be used:

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

The above is the detailed content of How Can I Check for a Server File's Existence Using jQuery or JavaScript?. For more information, please follow other related articles on the PHP Chinese website!