如何检查jQuery或纯JavaScript中是否存在文件?

2020/10/09 04:01 · javascript ·  · 0评论

如何检查服务器上的文件是否存在jQuery或纯JavaScript中?

使用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(成功)。

编辑2:由于不推荐使用同步XMLHttpRequest,因此您可以添加如下所示的实用程序方法以使其异步:

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

一种类似且最新的方法。

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

这对我有用:

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

我使用此脚本添加替代图像

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

HTML:

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

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

只要您在同一域上测试文件,它就可以正常工作:

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

尝试运行此问题的答案时遇到了跨域权限问题,因此我选择了:

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

看来效果很好,希望这对某人有帮助!

如果您使用的是Babel Transpiler或Typescript 2,以下是ES7方法的实现方法:

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

我使用此脚本检查文件是否存在(它也处理跨源问题):

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

请注意,当检查的文件不包含JSON时,将引发以下语法错误。

未捕获的SyntaxError:意外的令牌<

异步调用以查看文件是否存在是更好的方法,因为它不会通过等待服务器的响应来降低用户体验。如果您.open在第三个参数设置为false的情况下进行调用(例如,在上面的许多示例中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/

对于客户端计算机,可以通过以下方式实现:

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

这是我将文件传输到特定位置的程序,如果文件不存在,则会显示警报

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

首先创建功能

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

这是对已接受答案的改编,但是我无法从答案中获得所需的内容,因此不得不凭直觉来测试此方法,因此我将解决方案放在这里。

我们需要验证本地文件是否存在,并且仅允许打开该文件(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");

    }
});

您要做的就是向服务器发送请求以进行检查,然后将结果发送回给您。

您尝试与哪种服务器通信?您可能需要编写一个小型服务来响应请求。

这没有解决OP的问题,但是对于从数据库返回结果的任何人:这是我使用的一种简单方法。

如果用户未上传头像,则该avatar字段为NULL,因此我将从img目录中插入默认的头像图像

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

然后

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

它对我有用,使用iframe忽略浏览器显示GET错误消息

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

我想要一个返回布尔值的函数,我遇到了与闭包和异步性有关的问题。我这样解决了:

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);
},
本文地址:http://javascript.askforanswer.com/ruhejianchajqueryhuochunjavascriptzhongshifoucunzaiwenjian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!