使用jQuery来检测远程图片文件是否存在

最近为我的憨豆人笑园添加图片功能时,遇到了这个问题,用户可以填写一个远程的图片地址,也可以上传一个本地图片。为了不浪费服务器的资源,我们需要在客户端先对用户填写的远程图片地址进行判断,看是否可以访问。可以访问在服务器端就进行处理添加到数据库中。

具体实施方法是这样的:

1、用户添加远程图片到input控件中,并为input控件添加焦点丢失处理方法;

2、当input控件的value值不为空时,使用ajax访问这个远程地址,当能够访问时,返回的状态码为success。

这里主要说说jQuery来完成这样一次ajax请求。

虽然jQuery提供了简单的get方法来完成一次ajax请求,但是这个方法在这里无法完成使用。而是要使用jQuery提供的ajax基础方法ajax方法。需要为这个ajax进行这样几个设置:

1、请求url,通过input控件获取

2、设置ajax请求超时时间(timeout),因为如果这个远程文件请求等待时间太长了本身也会影响用户的访问体验,而默认的timeout为30秒,太长了。

3、设置请求成功的回调函数success

4、设置请求失败的回调函数error

实现代码如下:

$("input").blur(function() {
    var imgurl = $("input").val();
    if (imgurl !== '') {
        // 设置Ajax请求超时时间为1s钟
        $.ajax(imgurl, {
            type: 'get',
            timeout: 1000,
            success: function() {
                alert("请求成功");
            },
            error: function() {
                alert("请求失败");
            }
        });
    }
});

这里需要注意一点的就是这个ajax请求超时timeout的设置,这个设置的单位为毫秒,而且这个设置是全局的,所以,如果需要再次进行一次其他的ajax请求,需要重新设置timeout值。

这样做有一个好处就是在提交表单前,我们就可以先模拟一次用户访问网站时对站外图片的请求效果,对于远程图片服务器较差的影响访问体验的图片可以提前给过滤掉!

/*  万恶的分割线,我在这里要为大家道歉了,为了上面的错误代码,上面通过jQuery的方法判断远程图片文件是否存在的方法只在同域名下才可以用,要跨域名使用是不可能的,经过研究,总算找到了正确的方法,算是将功补过吧  */

这里就不需要用到jQuery了,就是普通的JavaScript代码。

创建一个Image()对象后为这个对象添加一个onload事件的处理方法和一个onerror事件的处理方法,然后通过定义这个Image对象的src属性来确定要加载的图像。

当远程图片成功加载到本机内存中后,则触发onload事件,如果找不到图片,或者加载失败,则触发onerror事件,代码如下:

// 定义一个Image对象
var img = new Image();
// 为Image对象添加图片加载成功的处理方法
img.onload = function() {
    alert("图像加载成功");
};
// 为Image对象添加图片加载失败的处理方法
img.onerror = function() {
    alert("图像加载失败");
}
// 开始加载图片
img.src = imgurl;

这段代码经过测试,正确!

http://www.xcoder.cn/index.php/archives/1019

使用jQuery来检测远程图片文件是否存在的更多相关文章

  1. PHP如何判断远程图片文件是否存在

    <?php $url = 'http://www.nowamagic.net/images/test.jpg'; if( @fopen( $url, 'r' ) ) { echo 'File E ...

  2. ASP保存远程图片文件到本地代码

    <% Function SaveRemoteFile(LocalFileName,RemoteFileUrl) SaveRemoteFile=True dim Ads,Retrieval,Get ...

  3. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  4. PHP判断远程图片或文件是否存在

    PHP判断远程图片是否存在,此方法同样适用于判断远程文件是否存在,这是一种既然有效率且又准确的方法,建议采用此方法,以往使用get_headers()方法判断都是有问题的: function chec ...

  5. 网站图片挂马检测及PHP与python的图片文件恶意代码检测对比

    前言 周一一早网管收到来自阿里云的一堆警告,发现我们维护的一个网站下有数十个被挂马的文件.网管直接关了vsftpd,然后把警告导出邮件给我们. 取出部分大致如下: 服务器IP/名称 木马文件路径 更新 ...

  6. C#远程获取图片文件流的方法【很通用】

    因为之前写的代码,也能获取到图片流信息,但是会是凌乱的线条,后百度得这个方法,必须记录一下 C# try { WebRequest myrequest = WebRequest.Create(Http ...

  7. 火车头dede采集接口,图片加水印,远程图片本地化,远程无后缀的无图片本地化

    <?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...

  8. php下载远程图片方法总结(curl手动解析header)curl跳转问题解决

    常用方法一般有:. file_get_contents file_put_contents readfile($file) //效率很高. 一般代码: /** * 抓取远程图片 * * @param ...

  9. FileReader:读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

随机推荐

  1. Annotation(一)——注解开发介绍

    <p>在编程中,一直强调的一点就是注释的编写,注释的规范等等.尤其是越是核心,程序越复杂,逻辑越多的清空下,注释的编写对我们以后的阅读代码,维护软件起着至关重要的作用.一款软件有着好的注释 ...

  2. hdu 5313 Bipartite Graph(dfs染色 或者 并查集)

    Problem Description Soda has a bipartite graph with n vertices and m undirected edges. Now he wants ...

  3. 利用libevent的timer实现定时器interval

    在不怎么了解libevent的情况下,看到timer这个关键字想到可以用来做定时任务,官方资料也不齐全,就从代码里看到了TIMEOUT字样,这么说来应该是支持timeout了,那interval呢,貌 ...

  4. (转)iOS Wow体验 - 第七章 - 操作图例与触屏人机工学

    本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第七章译文精选,其余章节将陆续放出.上一篇:Wow ...

  5. Javascript 文件操作(整理版)

    Javascript 文件操作 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详细介绍 ...

  6. 初学者学Java设计模式(一)------单例设计模式

    单例设计模式 单例设计模式是指一个类只会生成一个对象,优点是他可以确保所有对象都访问唯一实例. 具体实现代码如下: public class A { public static void main(S ...

  7. Android开源代码解读-基于SackOfViewAdapter类实现类似状态通知栏的布局

    一般来说,ListView的列表项都会采用相同的布局,只是填充的内容不同而已,这种情况下,Android提供了convertView帮我们缓存列表项,达到循环利用的目的,开发者也会使用ViewHold ...

  8. C语言中static关键字的作用

    static的作用(精辟分析) 在C语言中,static的字面意思很容易把我们导入歧途,其实它的作用有三条. (1)先来介绍它的第一条也是最重要的一条:隐藏. 当我们同时编译多个文件时,所有未加sta ...

  9. post请求和get请求的区别

    1:如果表单是以post方式发送,那么表单中的数据会放在请求报文体中,发送到服务端.但是如果是以get方式提交表单,那么表单中用户输入的数据都是以URL地址的方式发送到服务端. 2:在服务端接收数据时 ...

  10. poj1562 DFS入门

    K - 搜索 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:10000KB     64bit I ...