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

使用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