使用jQuery来检测远程图片文件是否存在
2014-09-29 13:49
295 查看
使用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( "请求失败" ); |
} |
}); |
} |
}); |
这样做有一个好处就是在提交表单前,我们就可以先模拟一次用户访问网站时对站外图片的请求效果,对于远程图片服务器较差的影响访问体验的图片可以提前给过滤掉!
/* 万恶的分割线,我在这里要为大家道歉了,为了上面的错误代码,上面通过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
相关文章推荐
- PHP如何判断远程图片文件是否存在
- PHP如何判断远程图片文件是否存在
- 使用jquery+ajax方式实现用户注册时,检测用户名是否存在
- PHP判断远程图片或文件或url是否存在
- JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~
- C# 判断 检测 access 建库 建表 文件是否存在等 数据操作 使用 ADOX
- PHP如何判断远程图片文件是否存在
- php判断远程图片或文件是否存在
- jquery 判断网络图片,或网络文件是否存在
- PHP如何判断远程图片文件是否存在
- JavaScript判断远程图片是否存在,加载完成:onerror 属性- & jQuery实现(如果因为网络或图片的原因发生异常,则显示该图片)~
- PHP判断远程图片或文件是否存在
- PHP判断远程图片或文件或url是否存在-180
- 判断本地是否存在Jquery文件,如果不存在则使用CDN加速的Jquery文件
- C# 判断 检测 access 建库 建表 文件是否存在等 数据操作 使用 ADOX
- PHP如何判断远程图片文件是否存在
- PHP使用get_headers函数判断远程文件是否存在的方法
- PHP如何判断远程图片文件是否存在
- 在config配置文件添加iis的Mime类型,检测文件中是否存在添加语句,使用xml解析方法
- PHP使用get_headers函数判断远程文件是否存在的方法