अगर jQuery या शुद्ध जावास्क्रिप्ट में फ़ाइल मौजूद है, तो मैं कैसे जांच करूं?


259

यदि मेरे सर्वर पर कोई फ़ाइल jQuery या शुद्ध जावास्क्रिप्ट में मौजूद है, तो मैं कैसे जांच करूं?

जवाबों:


433

JQuery के साथ:

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

संपादित करें:

यहां jQuery का उपयोग किए बिना 404 स्थिति की जांच करने के लिए कोड है

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

छोटे परिवर्तन और यह स्थिति HTTP स्थिति कोड 200 (सफलता) के बदले जांच सकता है।

EDIT 2: चूंकि सिंक XMLHttpRequest को पदावनत किया गया है, आप इस तरह की उपयोगिता करने के लिए एक उपयोगिता विधि जोड़ सकते हैं:

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

5
अपने शुद्ध जावास्क्रिप्ट उदाहरण में आपको OnReadyStateChangeHTTP_STATUS की जांच करने से पहले बाध्यकारी घटना होनी चाहिए ।
राबर्टपिट

8
उदाहरण कोड गलत है, और सर्वर पर क्या चल रहा है, इस बारे में कुछ भी नहीं कहा गया है। मूल प्रश्न बहुत अस्पष्ट है, लेकिन यह मानने का कोई कारण नहीं है कि सर्वर जो चल रहा है वह वास्तव में फाइल सिस्टम के लिए सीधे यूआरएल मैपिंग है। ईमानदारी से, मैं यह नहीं देखता कि यह उत्तर इतना लोकप्रिय क्यों है क्योंकि यह वास्तव में यह नहीं कहता कि प्रश्न के लिए क्या पूछा जाए।
पॉइन्टी

75
@ पॉइन्टी हो सकती है क्योंकि यह कुछ हल करता है बाकी हममें से कुछ के लिए Googling हैं
इयान हंटर

4
@ cichy - क्या यह फ़ाइल को मेमोरी में लोड करता है या नहीं? मैं अस्तित्व की जाँच कर रहा हूँ, लेकिन फ़ाइल लोड नहीं कर रहा हूँ।
ब्रायन

11
मुख्य थ्रेड पर सिंक्रोनस XMLHttpRequest अंत उपयोगकर्ता के अनुभव के लिए हानिकारक प्रभावों के कारण हटा दिया गया है। अधिक मदद के लिए xhr.spec.whatwg.org (यह ब्राउज़र द्वारा चेतावनी)
kupendra

71

एक समान और अधिक अप-टू-डेट दृष्टिकोण।

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

2
यह अधिक अप-टू-डेट क्यों है? $.ajaxबेहतर लगता है अगर यह अधिक पिछड़े संगत है, है ना?
टिम पीटरसन

15
$ .ajax भी काम करता है, लेकिन सफलता / त्रुटि / पूर्ण कार्यों को वादों, किए / असफल / हमेशा तरीकों के पक्ष में चित्रित किया जाता है। इसके बारे में यहाँ और अधिक पढ़ api.jquery.com/jQuery.ajax । मैंने यहाँ उपयोग किया क्योंकि हम केवल एक साधारण प्राप्त करने में रुचि रखते हैं, लेकिन यह $ .ajax ({url: url, type: 'GET'}) के लिए केवल शॉर्टहैंड है।
मैथ्यू जेम्स डेविस

4
यदि छवि मौजूद नहीं है, तो कंसोल एक 404 त्रुटि है। क्या इसे हटाने का कोई तरीका है, क्योंकि मेरा आवेदन हमेशा एक छवि के अस्तित्व में नहीं आने की उम्मीद कर रहा है ...
user1534664

1
संभव नहीं, देखें: stackoverflow.com/a/16379746/1981050 । हालांकि, यह आपके व्यवहार को बाधित नहीं करना चाहिए। यह सिर्फ कुछ बाहरी लॉगिंग उत्पन्न करेगा।
मैथ्यू जेम्स डेविस

1
क्रॉस ऑरिजनल इश्यू इस से असंबंधित हैं
मैथ्यू जेम्स डेविस

69

यह मेरे लिए काम करता है:

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

2
जबकि कुछ अन्य उत्तर उनके कार्य के लिए बेहतर हैं, मैं इस उत्तर को +1 करता हूं क्योंकि यह वही है जो मैं खोज रहा था। बस याद रखें, आपको हमेशा शून्य मिलेगा जब तक आप पहले सामग्री लोड नहीं करते हैं! यानी: window.addEventListener ('लोड', फंक्शन () {
SpiRail

वास्तव में, मेरे पास अभी भी मुद्दे थे, यहां तक ​​कि खिड़की के भार के साथ भी। लगता है जैसे छवि को तब तक मापा नहीं जा सकता जब तक कि इसे किसी तरह से कैश न किया जाए। वैसे भी, मैं पेज के पहले लोड पर मेरे लिए काम नहीं करता। (यानी: उपयोगकर्ता ने पहले कभी इस छवि को नहीं देखा है)। यदि आपके पास पिछले पृष्ठ पर छवि है, तो यह आपके लिए काम कर सकता है, हो सकता है ...
स्पिरेल

3
ऐसा इसलिए है क्योंकि यह छवि के स्रोत को सेट करता है और IMMEDIATELY चेक को उस छवि की ऊंचाई देखने के लिए देता है जो अभी तक डाउनलोड करना समाप्त नहीं हुआ है। आपको काम करने के लिए ऑनलोड हैंडलर जोड़ना होगा। यह उस सटीक कारण के लिए एक विश्वसनीय दृष्टिकोण नहीं है।
दुवेवाद

अगर आप एक img.onload हैंगर को इतने stackoverflow.com/a/12355031/988591 की तरह जोड़ते हैं तो यह विश्वसनीय क्यों नहीं है ?
jj_

3
सवाल एक फ़ाइल के बारे में पूछता है , छवि नहीं! यदि URL मौजूद है और कोई फ़ाइल नहीं है, तो इसकी ऊंचाई 0 होगी!
अपोस्टोलोस

44

मैंने इस स्क्रिप्ट का उपयोग वैकल्पिक छवि को जोड़ने के लिए किया है

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

HTML:

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

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


24
महान - वह नहीं जानता था। यदि आप एक छवि के मौजूद न होने पर किसी सहेजे गए विकल्प को सेट करने के लिए निम्नलिखित कर सकते हैं: <img src = "image.gif" onerror = "this.src = 'altern.gif'">
Ridcully

2
@ निश्चित रूप से आह, लेकिन क्या होगा यदि विकल्प विफल हो जाता है? तब आप एक अंतहीन लूप में हैं?
rvighne

यदि विकल्प विफल हो जाता है, तो मुझे लगता है कि सर्वर साइड (या प्रोग्रामर की तरफ: P) पर कुछ और गलत है
एरेनोर पाज़

आप हमेशा अंतहीन लूप को रोकने के लिए पूरी छवि सेट करते समय कुछ भी नहीं img टैग के OnError सेट कर सकते हैं।
KingOfHypocrites

बहुत अच्छा काम सर। एक जादू की तरह काम करता है।
हिरेन

24

जब तक आप एक ही डोमेन पर फ़ाइलों का परीक्षण कर रहे हैं तब तक यह काम करना चाहिए:

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

कृपया ध्यान दें, यह उदाहरण एक GET अनुरोध का उपयोग कर रहा है, जो शीर्षकों को प्राप्त करने के अलावा (सभी के लिए आपको मौसम की मौजूदगी की जाँच करने की आवश्यकता है) पूरी फ़ाइल मिलती है। यदि फ़ाइल बड़ी है तो यह विधि पूर्ण होने में थोड़ा समय ले सकती है।

ऐसा करने का बेहतर तरीका इस लाइन को बदलना होगा: req.open('GET', url, false);कोreq.open('HEAD', url, false);


5
क्षमा करें, यह प्रभावी रूप से स्वीकृत उत्तर के समान है। मुझपर ध्यान मत दो।
Moob

1
गैर-jQuery के फॉर्म पर इसके कुछ और विवरण जो सहायक हो सकते हैं
टिम पीटरसन 12

@ मोह, यह "प्रभावी रूप से स्वीकृत उत्तर के समान नहीं है", आप एक GET अनुरोध भेज रहे हैं, जो HEAD अनुरोध के लिए अलग है।
यमसत

async: false, 30.0 और बाद के फ़ायरफ़ॉक्स संस्करण में तुल्यकालिक संचालन, और क्रोम के हाल के / वर्तमान संस्करणों में प्रतिकूल उपयोगकर्ता अनुभव के कारण हटा दिया गया है। असफल / त्रुटि के उपयोग के प्रयास किए गए। async: trueअतुल्यकालिक ऑपरेशन के लिए कॉलबैक फ़ंक्शन के साथ उपयोग करना चाहिए ।
केविन फेगन

कृपया आगे जेएस निष्पादित करने के लिए प्रतिक्रिया के लिए प्रतीक्षा करें? धन्यवाद।
vladanPro

16

इस प्रश्न के उत्तर को चलाने की कोशिश करते समय मुझे एक क्रॉस डोमेन अनुमतियां जारी हो रही थीं, इसलिए मैं इसके साथ गया:

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

यह बहुत अच्छा काम करता है, आशा है कि यह किसी की मदद करता है!


3
मुझे लगता है कि यह बूलियन मूल्यों को खो देगा क्योंकि वे कॉलबैक से लौटे हैं, न कि UrlExists फ़ंक्शन।
mikebridge

यह काम नहीं कर सकता, आपको इसे पढ़ना चाहिए: stackoverflow.com/questions/14220321/…
Hacketo

url कैसा दिखता है? , विस्तार के साथ या बिना विस्तार के?
151291

10

यहां बताया गया है कि ईएस 7 तरीके से कैसे करें, यदि आप बैबल ट्रांसपिलर या टाइपस्क्रिप्ट 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;
  }
}

फिर अपने अन्य asyncदायरे के अंदर , आप आसानी से जाँच सकते हैं कि क्या url मौजूद है:

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

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

5

मैं इस स्क्रिप्ट का उपयोग यह जांचने के लिए करता हूं कि क्या कोई फाइल मौजूद है (यह भी क्रॉस ओरिजनल इशू को हैंडल करता है):

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

ध्यान दें कि जब फ़ाइल की जाँच की जा रही है, तो निम्न सिंटैक्स त्रुटि नहीं डाली जाती है जिसमें JSON शामिल नहीं है।

बिना पढ़ा हुआ वाक्यविन्यास: अप्रत्याशित टोकन <


3

यदि कोई फ़ाइल मौजूद है, तो यह देखने के लिए async कॉल बेहतर दृष्टिकोण है, क्योंकि यह सर्वर से प्रतिक्रिया की प्रतीक्षा करके उपयोगकर्ता के अनुभव को नीचा नहीं करता है। यदि आप .openतीसरे पैरामीटर के साथ एक कॉल करते हैं , तो यह गलत है (उदाहरण के लिए ऊपर के कई उदाहरणों में http.open('HEAD', url, false);), यह एक सिंक्रोनस कॉल है, और आपको ब्राउज़र कंसोल में एक चेतावनी मिलती है।

एक बेहतर तरीका है:

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

स्रोत: https://xhr.spec.whatwg.org/


मुझे आपके तरीके, किसी भी विचार के साथ कंसोल लॉग में चेतावनी की प्रतिक्रिया मिलती है?
पियरे

.openतीसरे पैरामीटर के साथ कॉल करने trueका प्रयास करें, यह सुनिश्चित करने के लिए कि वह इसे अतुल्यकालिक रूप से कहता है, जैसे कि यह client.open("HEAD", address, true);@Prere
जिम बर्गमैन

2

क्लाइंट कंप्यूटर के लिए इसे निम्न द्वारा प्राप्त किया जा सकता है:

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")
}

यह एक विशिष्ट स्थान पर एक फ़ाइल स्थानांतरित करने के लिए मेरा कार्यक्रम है और मौजूद नहीं होने पर अलर्ट दिखाता है


1
यदि आप FileSystemObject का उपयोग करने जा रहे हैं तो FileExists () विधि का उपयोग करना आसान लगता है। msdn.microsoft.com/en-us/library/aa265024(v=vs.60).aspx
मार्क एफ गुएरा

2

यदि फ़ाइल मौजूद है, तो चेक करने के लिए जावास्क्रिप्ट फंक्शन:

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

1

पहले फ़ंक्शन बनाता है

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

निम्नानुसार फ़ंक्शन का उपयोग करने के बाद

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

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


मैंने यहां कोशिश की लेकिन उसे काम नहीं मिला। मुझे क्या याद आ रहा है?
चेतबाहना

1

यह स्वीकार किए गए उत्तर के लिए एक अनुकूलन है, लेकिन मुझे वह नहीं मिला जो मुझे उत्तर से चाहिए था, और इस परीक्षण को काम करना था क्योंकि यह एक कूबड़ था, इसलिए मैं अपना समाधान यहां डाल रहा हूं।

हमें एक स्थानीय फ़ाइल मौजूद होने की पुष्टि करने की आवश्यकता है, और केवल फ़ाइल (एक पीडीएफ) को खोलने की अनुमति दें यदि यह मौजूद है। यदि आप वेबसाइट के URL को छोड़ देते हैं, तो ब्राउज़र स्वचालित रूप से होस्ट नाम का निर्धारण करेगा - यह स्थानीयहोस्ट और सर्वर पर काम कर रहा है:

$.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");

    }
});

0

आपको जो करना है वह चेक करने के लिए सर्वर को एक अनुरोध भेजना है, और फिर आपको परिणाम वापस भेजना है।

आप किस प्रकार के सर्वर से संवाद करने की कोशिश कर रहे हैं? अनुरोध का जवाब देने के लिए आपको एक छोटी सेवा लिखने की आवश्यकता हो सकती है।


0

यह ओपी के प्रश्न को संबोधित नहीं करता है, लेकिन जो कोई डेटाबेस से परिणाम लौटा रहा है, उसके लिए: यहां एक सरल विधि है जिसका मैंने उपयोग किया है।

यदि उपयोगकर्ता ने एक अवतार अपलोड नहीं किया है तो वह avatarक्षेत्र होगा NULL, इसलिए मैं imgनिर्देशिका से डिफ़ॉल्ट अवतार छवि सम्मिलित करूंगा ।

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

फिर

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

0

यह मेरे लिए काम करता है, ब्राउज़रों को अनदेखा करने के लिए iframe का उपयोग करें GET त्रुटि संदेश दिखाएं

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

0

मैं एक ऐसा फंक्शन चाहता था जो बूलियन लौटा दे, मुझे क्लोजर और एसिंक्रोनसिटी से जुड़ी समस्याओं का सामना करना पड़ा। मैंने इस तरह हल किया:

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);
},
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.