Làm cách nào để kiểm tra xem tệp có tồn tại trong jQuery hoặc JavaScript thuần không?

Làm cách nào để kiểm tra xem một tệp trên máy chủ của tôi tồn tại trong jQuery hay JavaScript thuần?

Với jQuery:

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

BIÊN TẬP:

Đây là mã để kiểm tra trạng thái 404 mà không cần sử dụng jQuery

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

Thay đổi nhỏ và thay vào đó, nó có thể kiểm tra trạng thái mã trạng thái HTTP 200 (thành công).

EDIT 2: Vì XMLHttpRequest không được đồng bộ hóa, bạn có thể thêm một phương thức tiện ích như thế này để thực hiện async:

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

Một cách tiếp cận tương tự và cập nhật hơn.

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

Điều này làm việc cho tôi:

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

tôi đã sử dụng kịch bản này để thêm hình ảnh thay thế

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

HTML:

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

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

Miễn là bạn đang kiểm tra các tệp trên cùng một tên miền thì điều này sẽ hoạt động:

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

Xin lưu ý, ví dụ này đang sử dụng yêu cầu GET, ngoài việc nhận các tiêu đề (tất cả những gì bạn cần để kiểm tra thời tiết tệp tồn tại) sẽ nhận được toàn bộ tệp. Nếu tệp đủ lớn, phương pháp này có thể mất một lúc để hoàn thành.

Cách tốt hơn để làm điều này sẽ được thay đổi dòng này: req.open('GET', url, false);đểreq.open('HEAD', url, false);

Tôi đã gặp vấn đề về quyền truy cập tên miền chéo khi cố gắng chạy câu trả lời cho câu hỏi này vì vậy tôi đã sử dụng:

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

Nó dường như làm việc tuyệt vời, hy vọng điều này sẽ giúp ai đó!

Đây là cách thực hiện theo cách ES7, nếu bạn đang sử dụng bộ chuyển mã Babel hoặc Bản mô tả 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;
  }
}

Sau đó, trong asyncphạm vi khác của bạn , bạn có thể dễ dàng kiểm tra xem url có tồn tại hay không:

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

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

Tôi sử dụng tập lệnh này để kiểm tra xem một tập tin có tồn tại không (nó cũng xử lý vấn đề nguồn gốc chéo):

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

Lưu ý rằng lỗi cú pháp sau được đưa ra khi tệp đang được kiểm tra không chứa JSON.

Uncaught SyntaxError: Mã thông báo bất ngờ <

Một cuộc gọi không đồng bộ để xem nếu một tệp tồn tại là cách tiếp cận tốt hơn, bởi vì nó không làm giảm trải nghiệm người dùng bằng cách chờ phản hồi từ máy chủ. Nếu bạn thực hiện cuộc gọi .openvới tham số thứ ba được đặt thành false (ví dụ như trong nhiều ví dụ ở trên http.open('HEAD', url, false);), đây là cuộc gọi đồng bộ và bạn nhận được cảnh báo trong bảng điều khiển trình duyệt.

Một cách tiếp cận tốt hơn là:

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

nguồn: https://xhr.spec.whatwg.org/

Đối với một máy tính khách, điều này có thể đạt được bằng cách:

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

Đây là chương trình của tôi để chuyển một tệp đến một vị trí cụ thể và hiển thị cảnh báo nếu nó không tồn tại

Hàm JavaScript để kiểm tra nếu một tệp tồn tại:

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

Đầu tiên tạo hàm

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

Sau khi sử dụng chức năng như sau

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

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

Đây là một sự thích ứng với câu trả lời được chấp nhận, nhưng tôi không thể có được những gì tôi cần từ câu trả lời, và phải kiểm tra nó hoạt động vì nó là một linh cảm, vì vậy tôi đang đưa giải pháp của mình lên đây.

Chúng tôi cần xác minh một tệp cục bộ tồn tại và chỉ cho phép tệp (PDF) mở nếu nó tồn tại. Nếu bạn bỏ qua URL của trang web, trình duyệt sẽ tự động xác định tên máy chủ - làm cho nó hoạt động trong localhost và trên máy chủ:

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

    }
});

Những gì bạn phải làm là gửi yêu cầu đến máy chủ để thực hiện kiểm tra, sau đó gửi lại kết quả cho bạn.

Bạn đang cố gắng liên lạc với loại máy chủ nào? Bạn có thể cần phải viết một dịch vụ nhỏ để đáp ứng yêu cầu.

Điều này không giải quyết câu hỏi của OP, nhưng đối với bất kỳ ai trả về kết quả từ cơ sở dữ liệu: đây là một phương pháp đơn giản tôi đã sử dụng.

Nếu người dùng không tải lên hình đại diện thì avatartrường sẽ là NULLvậy, vì vậy tôi sẽ chèn hình ảnh đại diện mặc định từ imgthư mục.

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

sau đó

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

Nó hoạt động với tôi, sử dụng iframe để bỏ qua các trình duyệt hiển thị thông báo lỗi GET

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

Tôi muốn một hàm sẽ trả về boolean, tôi gặp phải các vấn đề liên quan đến đóng cửa và không điển hình. Tôi đã giải quyết theo cách này:

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