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

时间: 2024-10-10 14:08:36

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

PHP判断远程图片或文件或url是否存在-180

我通常使用curl判断判断远程图片或文件是否存在: /**     * @link http://www.phpddt.com     */    function url_exists($url) {        $ch = curl_init();         curl_setopt ($ch, CURLOPT_URL, $url);         //不下载        curl_setopt($ch, CURLOPT_NOBODY, 1);        //设置超时     

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

PHP判断远程图片是否存在,此方法同样适用于判断远程文件是否存在,这是一种既然有效率且又准确的方法,建议采用此方法,以往使用get_headers()方法判断都是有问题的: function check_remote_file_exists($url) { $curl = curl_init($url); //不取回数据 curl_setopt($curl, CURLOPT_NOBODY, true); //发送请求 $result = curl_exec($curl); $found = fa

获取远程图片保存到本地文件夹中

1 /** 2 * 抓取远程图片到本地,可以抓取不带有后缀的图片 3 * @author YanYing <[email protected]> 4 * @link bidianer.com 5 */ 6 class GrabImage{ 7 8 /** 9 * @var string 需要抓取的远程图片的地址 10 * 例如:http://www.bidianer.com/img/icon_mugs.jpg 11 * 有一些远程文件路径可能不带拓展名 12 * 形如:http://www.x

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

前言 周一一早网管收到来自阿里云的一堆警告,发现我们维护的一个网站下有数十个被挂马的文件.网管直接关了vsftpd,然后把警告导出邮件给我们. 取出部分大致如下: 服务器IP/名称 木马文件路径 更新时间 木马类型 状态(全部) *.*.*.* /path/*144.gif 2017/8/7 5:53 Webshell 待处理 *.*.*.* /path/*132.jpg 2017/8/7 5:23 Webshell 待处理 *.*.*.* /path/*156.txt 2017/8/7 5:2

PHP+jQuery+Ajax实现多图片上传介绍

PHP+jQuery+Ajax实现多图片上传介绍: 本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用. 下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考. 在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图如下: 一.HTML代码: 在页面上放置一个form表单,使用pos

ueditor样式过滤去除和远程图片上传自定义

ueditor自定义编辑的时候,比如需要做延迟加载,这个时候需要自定义图片等,但是,ueditor会去除img上面的属性,比如data-original和把远程图片自动上传. 这个时候,首先,需要给图片自动上传加上属性,不如对于jquery.lazyload延迟加载的图片,必定带有data-original属性,只要检测出此属性,就不远程上传.其它属性自定义提那家,代码如下: 'wordimage':{ execCommand:function () { var images = domUtil

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

jQuery之批量上传文件插件之一

$("#uploader").plupload({     /*常规设置*/     runtimes:'html5,flash,silverlight,html4',     url:'hyzx/seller/commPicUpload.action',     /*最大文件限制b, kb, mb, gb, tb */     max_file_size:'1mb',     /*是否生成唯一文件名,如果为true会为上传的文件唯一的文件名.*/     unique_names:t

Android 获取并显示远程图片 Picasso框架的使用(一)

转载请注明出处:明桑Android 在Android开发中,常需要从远程获取图片并显示在客户端,当然我们可以使用原生HttpUrlConnection和AsyncTask等操作来完成,但并不推荐,因为这样不仅需要我们编写大量的代码,还需要处理缓存和下载管理等,最好自己封装成库或者采用第三方库: Picasso:A Powerful Image Downloading and Caching Library for Android 根据名字就知道它是跟什么相关了(Picasso:毕加索)它的基本操