How Can I Verify File Existence on a Server Using jQuery and JavaScript?

Verifying File Existence with jQuery and JavaScript

Determining the existence of a file on a server is crucial in various web development scenarios. This comprehensive guide will walk you through two practical approaches: using jQuery and pure JavaScript.

jQuery Method

jQuery provides an elegant method for checking file existence using XHR with the HEAD request type. The following code demonstrates this approach:

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

Pure JavaScript Method

Without jQuery, pure JavaScript offers a similar capability using the XMLHttpRequest object. Here's an effective implementation:

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

Note that the code above checks for a 404 HTTP status code. To verify a successful status code (e.g., 200), make the following modification:

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

Async Alternative for JavaScript

Since synchronous XMLHttpRequest is deprecated, consider the following asynchronous utility method:

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 Verify File Existence on a Server Using jQuery and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!