Bagaimana saya memeriksa apakah file ada di jQuery atau JavaScript murni?

Bagaimana cara saya memeriksa apakah file di server saya ada di jQuery atau JavaScript murni?

Dengan jQuery:

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

EDIT:

Berikut adalah kode untuk memeriksa status 404, tanpa menggunakan jQuery

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

Perubahan kecil dan itu bisa memeriksa status kode status HTTP 200 (sukses), sebagai gantinya.

EDIT 2: Karena sinkronisasi XMLHttpRequest sudah usang, Anda dapat menambahkan metode utilitas seperti ini untuk melakukannya async:

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

Pendekatan serupa dan lebih mutakhir.

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

Ini bekerja untuk saya:

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

saya menggunakan skrip ini untuk menambahkan gambar alternatif

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

HTML:

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

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

Selama Anda menguji file pada domain yang sama, ini akan berfungsi:

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

Harap perhatikan, contoh ini menggunakan permintaan GET, yang selain mendapatkan tajuk (semua yang Anda butuhkan untuk memeriksa cuaca ada file) mendapatkan seluruh file. Jika file cukup besar, metode ini dapat memakan waktu cukup lama untuk selesai.

Cara yang lebih baik untuk melakukan ini adalah mengubah baris ini: req.open('GET', url, false);menjadireq.open('HEAD', url, false);

Saya mendapatkan masalah izin lintas domain ketika mencoba menjalankan jawaban untuk pertanyaan ini, jadi saya menjawab:

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

Tampaknya bekerja dengan baik, semoga ini membantu seseorang!

Berikut ini cara melakukannya dengan cara ES7, jika Anda menggunakan Babel transpiler atau 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;
  }
}

Kemudian di dalam asyncruang lingkup Anda yang lain , Anda dapat dengan mudah memeriksa apakah url ada:

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

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

Saya menggunakan skrip ini untuk memeriksa apakah ada file (juga menangani masalah lintas asal):

$.ajax(url, {
       method: 'GET',
       dataType: 'jsonp'
         })
   .done(function(response) { 
        // exists code 
    }).fail(function(response) { 
        // doesnt exist
    })

Perhatikan bahwa kesalahan sintaks berikut dilemparkan ketika file yang diperiksa tidak mengandung JSON.

Uncaught SyntaxError: Token yang tidak terduga <

Panggilan async untuk melihat apakah ada file adalah pendekatan yang lebih baik, karena itu tidak menurunkan pengalaman pengguna dengan menunggu respons dari server. Jika Anda melakukan panggilan ke .opendengan parameter ketiga disetel ke false (seperti dalam banyak contoh di atas, misalnyahttp.open('HEAD', url, false); ), ini adalah panggilan sinkron, dan Anda mendapatkan peringatan di konsol browser.

Pendekatan yang lebih baik adalah:

function fetchStatus( address ) {
  var client = new XMLHttpRequest();
  client.onload = function() {
    // in case of network errors this might not give reliable results
    returnStatus( this.status );
  }
  client.open( "HEAD", address, true );
  client.send();
}

function returnStatus( status ) {
  if ( status === 200 ) {
    console.log( 'file exists!' );
  }
  else {
    console.log( 'file does not exist! status: ' + status );
  }
}

sumber: https://xhr.spec.whatwg.org/

Untuk komputer klien ini dapat dicapai dengan:

try
{
  var myObject, f;
  myObject = new ActiveXObject("Scripting.FileSystemObject");
  f =   myObject.GetFile("C:\\img.txt");
  f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
  alert("file does not exist")
}

Ini adalah program saya untuk mentransfer file ke lokasi tertentu dan menunjukkan peringatan jika tidak ada

Fungsi JavaScript untuk memeriksa apakah ada file:

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

Pertama menciptakan fungsi

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

Setelah menggunakan fungsi sebagai berikut

if($.UrlExists("urlimg")){
	foto = "img1.jpg";
}else{
	foto = "img2.jpg";
}

$('<img>').attr('src',foto);

Ini adalah adaptasi untuk jawaban yang diterima, tetapi saya tidak bisa mendapatkan apa yang saya butuhkan dari jawaban, dan harus menguji ini berhasil karena itu firasat, jadi saya meletakkan solusi saya di sini.

Kami perlu memverifikasi file lokal ada, dan hanya mengizinkan file (PDF) untuk membuka jika ada. Jika Anda menghilangkan URL situs web, browser akan secara otomatis menentukan nama host - membuatnya berfungsi di localhost dan di server:

$.ajax({

    url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
    type: 'HEAD',
    error: function () {
        //file not exists
        alert('PDF does not exist');

    },
    success: function () {
        //file exists
        window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");

    }
});

Yang harus Anda lakukan adalah mengirim permintaan ke server untuk melakukan pemeriksaan, dan kemudian mengirimkan kembali hasilnya kepada Anda.

Jenis server apa yang Anda coba untuk berkomunikasi? Anda mungkin perlu menulis layanan kecil untuk menanggapi permintaan.

Ini tidak menjawab pertanyaan OP, tetapi bagi siapa saja yang mengembalikan hasil dari database: inilah metode sederhana yang saya gunakan.

Jika pengguna tidak mengunggah avatar, maka avatarbidangnya adalah NULL, jadi saya akan menyisipkan gambar avatar default dari imgdirektori.

function getAvatar(avatar) {
    if(avatar == null) {
        return '/img/avatar.jpg';
    } else {
        return '/avi/' + avatar;
    }
}

kemudian

<img src="' + getAvatar(data.user.avatar) + '" alt="">

Ini berfungsi untuk saya, gunakan iframe untuk mengabaikan browser menampilkan pesan kesalahan GET

 var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
 if ($(imgFrame).find('img').attr('width') > 0) {
     // do something
 } else {
     // do something
 }

Saya menginginkan fungsi yang akan mengembalikan boolean, saya mengalami masalah terkait dengan penutupan dan asinkronisitas. Saya memecahkan masalah ini:

checkFileExistence= function (file){
    result=false;
    jQuery.ajaxSetup({async:false});
    $.get(file)
        .done(function() {
           result=true;
        })
        .fail(function() {
           result=false;
        })
    jQuery.ajaxSetup({async:true});
    return(result);
},