Check html file exist on server using javascript - Stack Overflow

admin管理员组

文章数量:1277317

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

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

• javascript
• html

Share Improve this question Follow edited Sep 1, 2012 at 9:27 Dan Barzilay 4,99355 gold badges2828 silver badges4040 bronze badges asked Sep 1, 2012 at 9:02 Muhammad Faiq BakhtyarMuhammad Faiq Bakhtyar 3111 gold badge11 silver badge66 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use ajax for check file exists or not

Using Jquery

$.ajax({
        url:'http://www.example./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.plete)        
        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./abc.html');​

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);

• 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>

本文标签： Check html file exist on server using javascriptStack Overflow