Check html file exist on server using javascript

Question

My ASPX code generated some html files where I just put link for paging like

<a href="1.html">First</a>&nbsp;|&nbsp;
<a href="3.html">Next</a>&nbsp;|&nbsp;
<a href="1.html">Previous</a>&nbsp;|&nbsp;
<a href="9.html">Last</a>

say if user currently on second page when it press Next moves to 3rd page ...

now issue is when user clicking Next button several times and system is in progress to generate let say 5th page it will show error page.

Is there any way to check from html via javascript to check whether file is present or not? Kindly help me to pull out from this show stopper issue

you could request the sites with ajax and check if the status code is not 200 — GottZ
– GottZ, Commented Sep 1, 2012 at 9:06

Dan Barzilay · Accepted Answer · 2012-09-01 09:28:15Z

6

You can use ajax for check file exists or not

Using Jquery

$.ajax({
        url:'http://www.example.com/3.html',
        error: function()
        {
           alert('file does not exists');
        },
        success: function()
        {
            alert('file exists');
        }
    });

Using Javascript

function checkIfRemoteFileExists(fileToCheck)
{
    var tmp=new Image;
    tmp.src=fileToCheck;

    if(tmp.complete)        
        alert(fileToCheck+" is available");        
    else        
     alert(fileToCheck+" is not available");        
}

Now to check if file exists or not call js function like this

checkIfRemoteFileExists('http://www.yoursite.com/abc.html');

edited Sep 1, 2012 at 9:28

Dan Barzilay

4,9835 gold badges29 silver badges40 bronze badges

answered Sep 1, 2012 at 9:14

Sibu

4,6272 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Purag Over a year ago

Keep in mind this answer uses jQuery, a Javascript library. :)

hossein sedighian · Accepted Answer · 2021-07-14 20:04:35Z

2

i like to use this type of script

function CheckFileExist(fileToCheck: string) {

    return new Promise((resolve, reject) => {
        fetch(fileToCheck).then(res => {
            if (res.status == 404) resolve(false);
            if (res.status == 200) resolve(true);
            return res.text()
        }) 
    })

}

and use it

 var exists = await CheckFileExist(link);

answered Jul 14, 2021 at 20:04

hossein sedighian

2,1901 gold badge17 silver badges21 bronze badges

1 Comment

René K Over a year ago

Beautiful solution! People who do not use Typescript should make sure to change the first line to "function CheckFileExist(fileToCheck) {" though.

Jan Turoň · Accepted Answer · 2021-05-30 18:46:38Z

There is an issue with @Sibu's solution: it actually downloads the file (it can be potentionally big, wasting traffic)
In the 2021, one should not use jQuery in new projects
native Promises and Fetch are the way to go today

<output id="output"></output>

<script>
// create a non-cached HTTP HEAD request
const fileExists = file =>
  fetch(file, {method: 'HEAD', cache: 'no-store'})
  .then(r => r.status==200);

// check the file existence on the server
// and place the link asynchronously after the response is given
const placeNext = file => fileExists(file).then(yes => output.innerHTML = 
   (yes ? `<a href="3.html">Next</a>` : '')
);

// place the "next" link in the output if "3.html" exists on the server
placeNext('3.html');
</script>

Collectives™ on Stack Overflow

Check html file exist on server using javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related