Hvordan sjekker jeg om en fil eksisterer i jQuery eller ren JavaScript?

Hvordan sjekker jeg om en fil på serveren min eksisterer i jQuery eller ren JavaScript?

Svar #1

Med jQuery:

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

REDIGER :

Her er koden for å sjekke 404-status, uten å bruke jQuery

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

Små endringer, og det kunne i stedet sjekke for HTTP-statuskode 200 (suksess).

REDIGER 2: Siden synkron XMLHttpRequest er utdatert, kan du legge til en hjelpefunksjon som dette for å gjøre det asynkront:

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

Svar #2

En lignende og mer oppdatert tilnærming.

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })

Svar #3

Dette fungerer for meg:

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

Svar #4

Jeg brukte dette skriptet for å legge til et alternativt bilde

function imgError()
{
alert('The image could not be loaded.');
}

HTML:

<img src="image.gif" onerror="imgError()" />

http://wap.w3schools.com/jsref/event_onerror.asp

Svar #5

Så lenge du tester filer på samme domene, bør dette fungere:

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

Vennligst merk at dette eksemplet bruker en GET-forespørsel, som i tillegg til å hente headerne (alt du trenger for å sjekke om filen eksisterer) henter hele filen. Hvis filen er stor nok, kan denne metoden ta en stund å fullføre.

Den beste måten å gjøre dette på ville være å endre denne linjen: req.open('GET', url, false); til req.open('HEAD', url, false);

Svar #6

Slik gjør du det på ES7-måten, hvis du bruker Babel-transpiler eller Typescript 2:

async function isUrlFound(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',
      cache: 'no-cache'
    });

    return response.status === 200;

  } catch(error) {
    // console.log(error);
    return false;
  }
}

Deretter, inne i din andre async-blokk, kan du enkelt sjekke om url finnes:

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');

console.log(isValidUrl); // true || false

Svar #7

Jeg fikk et problem med tverrdomenetillatelser da jeg prøvde å kjøre svaret på dette spørsmålet, så jeg gikk for:

function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
    return true;
}).bind('error', function() {
    return false;
});
}

Det ser ut til å fungere kjempebra, håper dette hjelper noen!

Svar #8

Alle de andre svarene kan feile på grunn av cache!

Å gjøre en HTTP-forespørsel til en fil på serveren kan fanges opp med HTTP-cache, og det bufrede svaret returneres deretter. Men filen kan være slettet på serveren i mellomtiden, så å ignorere cache kan returnere falske positive resultater.

En riktig løsning ville være å opprette en ikke-cachet HTTP HEAD-forespørsel. Nik Sumeikos svar bruker no-cache-header, noe som betyr at svaret kan caches, men må valideres på nytt før det kan brukes på nytt. I dette tilfellet kan serveren returnere 304: Ikke endret, som ikke er 200: OK og dermed falsk negativ.

For å unngå cache, er den korrekte headeren Cache-Control: no-store

Filen kan eksistere uten HTTP 200-respons

Du bør også huske på at omdirigering (301: Flyttet permanent, 307: Midlertidig omdirigering eller 308: Permanent omdirigering) kan forekomme, så filen kan eksistere et annet sted og kan returneres fra en annen plassering: avhengig av bruksområdet, kan man velge å følge omdirigeringen i stedet for å returnere falsk i dette tilfellet.

Husk også at bakgrunnsforespørsler vil bli blokkert hvis du sjekker fileksistens på et annet domene og CORS-policyen ikke åpnes på serveren din. I dette tilfellet returneres vanligvis 403: Forbudt, noe som ikke betyr at filen ikke eksisterer, men filen er utilgjengelig. Sist, men ikke minst, gjelder det samme for 500: Internal Server Error response, som betyr at HTTP-serveren ikke håndterte forespørselen, men filen kan være tilgjengelig på annen måte, for eksempel via FTP.

Følgende kode vil returnere sann hvis filen finnes, usann hvis den ikke gjør det eller udefinert hvis filen ikke er tilgjengelig eller omdirigert:

const fileExists = file =>
  fetch(file, {method: 'HEAD', cache: 'no-store'})
  .then(response => ({200: true, 404: false})[response.status])
  .catch(exception => undefined);

fileExists("yourFile.html").then(yes => yes && alert("yourFile.html exists"));

// or in the async scope...
let yourFileExists = await fileExists("yourFile.html");
if(yourFileExists) console.log("It is there!")
else if(yourFileExists===false) console.log("Nope, it was deleted.");
else console.log("You are not worthy the answer, puny human!");

Moderne og utdaterte tilnærminger

Siden vi lever i fremtiden nå, vil jeg også anbefale:

  • $.ajax() utdatert, ikke bruk i nye prosjekter
  • XMLHttpRequest() foreldet, ikke bruk i nye prosjekter
  • fetch() moderne tilnærming, bruk den hvis du har frihet til å velge

Merk GET/POST-metoder (som <img src...>) er ikke passende her, da de sløser med nettverkstrafikk ved å laste ned filen (tenk deg det verste scenariet med bilde i høy oppløsning og bruker med betalt mobildata i område med dårlig forbindelse)

Merk Den moderne PWA-tilnærmingen er å bruke Cache API med serviceWorkers fetch-hendelse, som avskjærer kommunikasjonen mellom klienten og HTTP-cachen. I eksemplet i linken, bør det være noe som

if(event.request.cache=="no-store") {
    // avoid cache storage and pass the request in the chain
    // client - cache storage - HTTP cache - server
    return fetch(event.request);
}

Uten dette kan cache-innstillingene bli ignorert, og det kan hende det ikke finnes noen måte å oppdage fjernfilens eksistens fra hovedtråden med serviceWorker kjørende - illustrert her.

Relaterte artikler