ฉันจะตรวจสอบว่ามีไฟล์อยู่ใน jQuery หรือ JavaScript บริสุทธิ์หรือไม่?


259

ฉันจะตรวจสอบว่าไฟล์บนเซิร์ฟเวอร์ของฉันมีอยู่ใน jQuery หรือ JavaScript บริสุทธิ์หรือไม่?

คำตอบ:


433

ด้วย jQuery:

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

แก้ไข:

นี่คือรหัสสำหรับการตรวจสอบสถานะ 404 โดยไม่ใช้ jQuery

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

การเปลี่ยนแปลงเล็กน้อยและสามารถตรวจสอบสถานะรหัสสถานะ HTTP 200 (สำเร็จ) แทน

แก้ไข 2: เนื่องจากการซิงค์ XMLHttpRequest ถูกคัดค้านคุณสามารถเพิ่มวิธีการยูทิลิตี้แบบนี้เพื่อทำ async:

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

5
ในตัวอย่างจาวาสคริปต์บริสุทธิ์ของคุณคุณควรจะผูกพันOnReadyStateChangeเหตุการณ์ก่อนที่คุณจะตรวจสอบ HTTP_STATUS
RobertPitt

8
โค้ดตัวอย่างนั้นผิดและไม่มีอะไรที่พูดถึงสิ่งที่เกิดขึ้นที่เซิร์ฟเวอร์ คำถามเดิมค่อนข้างคลุมเครือ แต่ก็ไม่มีเหตุผลที่จะสมมติว่าเซิร์ฟเวอร์ที่ใช้งานอยู่ในความเป็นจริงแล้วการจับคู่ URL กับระบบไฟล์โดยตรง จริงๆแล้วฉันไม่เห็นว่าทำไมคำตอบนี้จึงเป็นที่นิยมเพราะไม่ได้พูดว่าจะทำอย่างไรในสิ่งที่คำถามถาม
Pointy

75
@Pointy อาจเป็นเพราะมันช่วยแก้ไขบางสิ่งบางอย่างที่พวกเราที่เหลืออยู่กับ 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'})
Matthew James Davis

4
หากไม่มีอิมเมจคอนโซลจะเกิดข้อผิดพลาด 404 มีวิธีลบสิ่งนี้หรือไม่เนื่องจากแอปพลิเคชันของฉันคาดว่าจะไม่มีภาพหนึ่งภาพอยู่เสมอ ...
user1534664

1
ไม่ได้ดูที่: stackoverflow.com/a/16379746/1981050 อย่างไรก็ตามสิ่งนี้ไม่ควรขัดขวางพฤติกรรมของคุณ มันจะให้ผลการบันทึกภายนอกบางอย่าง
Matthew James Davis

1
ปัญหาที่เกิดขึ้นข้ามที่ไม่เกี่ยวข้องกับเรื่องนี้
แมทธิวเจมส์เดวิส

69

สิ่งนี้ใช้ได้กับฉัน:

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

2
ในขณะที่คำตอบอื่น ๆ ดีกว่าสำหรับฟังก์ชั่นของพวกเขาฉัน +1 คำตอบนี้เพราะมันเป็นสิ่งที่ฉันกำลังมองหา เพียงจำไว้ว่าคุณจะได้ศูนย์เสมอเว้นแต่คุณจะโหลดเนื้อหาก่อน! เช่น: window.addEventListener ('load', function () {
SpiRail

ที่จริงฉันยังมีปัญหาอยู่แม้โหลดหน้าต่าง ดูเหมือนว่าภาพไม่สามารถวัดได้จนกว่าจะถูกแคชอย่างใด อย่างไรก็ตามฉันไม่ทำงานสำหรับฉันในการโหลดหน้าครั้งแรก (เช่น: ผู้ใช้ไม่เคยเห็นภาพนี้มาก่อน) มันอาจจะทำงานสำหรับคุณถ้าคุณมีภาพบนหน้าก่อนหน้านี้อาจจะ ...
SpiRail

3
นั่นเป็นเพราะมันตั้งแหล่งที่มาของภาพและตรวจสอบทันทีเพื่อดูความสูงของภาพที่ยังไม่เสร็จสิ้นการดาวน์โหลด คุณต้องเพิ่มตัวจัดการ onload เพื่อให้สิ่งนี้ทำงาน นี่ไม่ใช่วิธีการที่เชื่อถือได้สำหรับเหตุผลที่แน่นอน
dudewad

ทำไมไม่ได้ว่ามันน่าเชื่อถือถ้าคุณเพิ่ม hanlder img.onload เช่นดังนั้นstackoverflow.com/a/12355031/988591 ?
jj_

3
คำถามถามเกี่ยวกับไฟล์ไม่ใช่ภาพ! หาก URL นั้นมีอยู่และไม่ใช่ไฟล์ความสูงของมันจะเป็น 0 !!
Apostolos

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
@Ridcully Ah แต่เกิดอะไรขึ้นถ้าทางเลือกล้มเหลว ถ้าอย่างนั้นคุณก็จะวนซ้ำไม่จบใช่มั้ย
rvighne

หากทางเลือกล้มเหลวฉันคิดว่ามีบางอย่างผิดปกติมากขึ้นในฝั่งเซิร์ฟเวอร์ (หรือในด้านของโปรแกรมเมอร์: P)
Erenor Paz

คุณสามารถตั้งค่า OnError ของแท็ก img เป็นอะไรเมื่อตั้งค่ารูปภาพ alt เพื่อป้องกันการวนซ้ำไม่รู้จบ
KingOfHypocrites

เยี่ยมมากครับ ทำงานเหมือนจับใจ
hiren

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 ซึ่งจะเป็นประโยชน์
ทิมปีเตอร์สัน

@ Moob ไม่ใช่ "ได้อย่างมีประสิทธิภาพเหมือนกับคำตอบที่ยอมรับ" คุณกำลังส่งคำขอ GET ซึ่งแตกต่างจากคำขอ HEAD
YemSalat

async: false, การทำงานแบบซิงโครนัสใน Firefox เวอร์ชัน 30.0 และใหม่กว่าและใน Chrome รุ่นล่าสุด / ปัจจุบันเลิกใช้งานเนื่องจากประสบการณ์การใช้งานที่ไม่เอื้ออำนวย ความพยายามในการใช้ทำให้ผลลัพธ์ล้มเหลว / ผิดพลาด ควรใช้async: trueกับฟังก์ชั่นการโทรกลับสำหรับการทำงานแบบอะซิงโครนัส
Kevin Fegan

กรุณารอการตอบสนองนี้ก่อนที่จะดำเนินการต่อไป JS? ขอบคุณ.
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

ต่อไปนี้เป็นวิธีทำ ES7 วิธีหากคุณใช้ Babel transpiler หรือ 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;
  }
}

จากนั้นใน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

Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด <


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);@Pierre
Jim Bergman

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
ทำเครื่องหมาย F Guerra

2

ฟังก์ชัน JavaScript เพื่อตรวจสอบว่ามีไฟล์อยู่หรือไม่:

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


ฉันลองที่นี่แต่ไม่สามารถใช้งานได้ สิ่งที่ฉันได้หายไป?
Chetabahana

1

นี่เป็นการปรับตัวให้เข้ากับคำตอบที่ยอมรับได้ แต่ฉันไม่สามารถได้สิ่งที่ต้องการจากคำตอบและต้องทดสอบว่ามันทำงานได้อย่างไรเพราะมันเป็นลางสังหรณ์ดังนั้นฉันจึงวางวิธีแก้ปัญหาของฉันที่นี่

เราจำเป็นต้องตรวจสอบว่าไฟล์ในตัวเครื่องมีอยู่และอนุญาตให้เปิดไฟล์ (PDF) หากมีอยู่เท่านั้น หากคุณไม่ใช้ URL ของเว็บไซต์เบราว์เซอร์จะตรวจสอบชื่อโฮสต์โดยอัตโนมัติซึ่งจะทำงานใน localhost และบนเซิร์ฟเวอร์:

$.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

นี่ไม่ได้ตอบคำถามของ OP แต่สำหรับทุกคนที่ส่งคืนผลลัพธ์จากฐานข้อมูล: นี่เป็นวิธีง่ายๆที่ฉันใช้

หากผู้ใช้ไม่ได้อัปโหลด Avatar 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);
},
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.