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

IT技术 javascript jquery file-io
2021-02-07 12:36:48

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

6个回答

使用 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,您可以添加这样的实用方法来异步执行:

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}
在您的纯 javascript 示例中,您应该OnReadyStateChange在检查 HTTP_STATUS 之前绑定事件。
2021-03-10 12:36:48
@cichy - 这是否将文件加载到内存中?我想检查是否存在但不加载文件。
2021-03-11 12:36:48
示例代码是错误的,并且没有任何关于服务器上发生的事情的说明。最初的问题非常含糊,但没有理由假设在那里运行的服务器实际上将 URL 直接映射到文件系统。老实说,我不明白为什么这个答案如此受欢迎,因为它并没有真正说明如何做问题所要求的。
2021-03-17 12:36:48
@Pointy 可能是因为它解决了我们其他人正在谷歌搜索的问题
2021-03-21 12:36:48
主线程上的同步 XMLHttpRequest 已被弃用,因为它会对最终用户的体验产生不利影响。如需更多帮助xhr.spec.whatwg.org(浏览器发出此警告)
2021-03-24 12:36:48

一种类似且更新的方法。

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })
为什么这是最新的?$.ajax如果向后兼容似乎更好,对吗?
2021-03-22 12:36:48
如果图像不存在,控制台回显是 404 错误。有没有办法删除它,因为我的应用程序总是期望一个图像不存在......
2021-03-22 12:36:48
$.ajax 也可以工作,但不推荐使用成功/错误/完整函数,以支持 promise、done/fail/always 方法。在此处阅读更多相关信息api.jquery.com/jQuery.ajax我在这里使用 get 是因为我们只对简单的 get 感兴趣,但这只是 $.ajax({url:url,type:'GET'}) 的简写。
2021-03-23 12:36:48
不可能,请参阅:stackoverflow.com/a/16379746/1981050但是,这不应打断您的行为。它只会产生一些无关的日志记录。
2021-03-29 12:36:48
跨源问题与此无关
2021-03-29 12:36:48

这对我有用:

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}
虽然其他一些答案更适合它们的功能,但我 +1 这个答案是我一直在寻找的。请记住,除非您先加载内容,否则您将始终获得零!即: window.addEventListener('load', function(){
2021-03-13 12:36:48
该问题询问的是文件,而不是图像!如果 URL 确实存在并且不是文件,则其高度将为 0!
2021-03-13 12:36:48
如果您像这样添加 img.onload 处理程序,为什么它不可靠stackoverflow.com/a/12355031/988591
2021-03-22 12:36:48
实际上,即使窗口加载,我仍然有问题。似乎在以某种方式缓存图像之前无法测量图像。无论如何,我在第一次加载页面时对我不起作用。(即:用户以前从未见过此图像)。如果您在前一页上有图像,它可能对您有用,也许...
2021-03-31 12:36:48
那是因为它设置了图像的来源并立即检查以查看尚未完成下载的图像的高度。您必须添加一个 onload 处理程序才能使其工作。出于这个确切原因,这不是一种可靠的方法。
2021-04-06 12:36:48

我用这个脚本来添加替代图像

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

HTML:

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

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

如果替代方案失败,我想服务器端(或程序员端:P)会有更多问题
2021-03-17 12:36:48
太好了——不知道。如果图像不存在,您可以执行以下操作来设置保存替代方案:<img src="image.gif" onerror="this.src='alternative.gif'">
2021-03-22 12:36:48
@Ridcully 啊,但是如果替代方案失败了怎么办?那你就陷入无限循环了吧?
2021-03-25 12:36:48
在设置 alt 图像时,您可以始终将 img 标签的 OnError 设置为空,以防止无限循环。
2021-04-02 12:36:48
来自未来的坏消息。这被标记为“已弃用。不适用于新网站。” developer.mozilla.org/en-US/docs/Web/HTML/Element/img
2021-04-04 12:36:48

只要您在同一个域上测试文件,这应该可以工作:

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

它有关非 jQuery 表单的更多详细信息可能会有所帮助
2021-03-18 12:36:48
请在继续执行进一步的JS之前等待响应?谢谢你。
2021-03-31 12:36:48
@Moob,它“实际上与接受的答案不同”,您发送的是 GET 请求,这与 HEAD 请求有很大不同。
2021-04-01 12:36:48
async: false、Firefox 30.0 及更高版本以及最近/当前版本的 Chrome 中的同步操作由于不利的用户体验而被弃用。尝试使用会导致失败/错误。async: true与回调函数一起用于异步操作。
2021-04-01 12:36:48
抱歉,这实际上与接受的答案相同。不理我。
2021-04-04 12:36:48