使用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(); |
这里需要注意一点的就是这个ajax请求超时timeout的设置,这个设置的单位为毫秒,而且这个设置是全局的,所以,如果需要再次进行一次其他的ajax请求,需要重新设置timeout值。
这样做有一个好处就是在提交表单前,我们就可以先模拟一次用户访问网站时对站外图片的请求效果,对于远程图片服务器较差的影响访问体验的图片可以提前给过滤掉!
/* 万恶的分割线,我在这里要为大家道歉了,为了上面的错误代码,上面通过jQuery的方法判断远程图片文件是否存在的方法只在同域名下才可以用,要跨域名使用是不可能的,经过研究,总算找到了正确的方法,算是将功补过吧 */
这里就不需要用到jQuery了,就是普通的JavaScript代码。
创建一个Image()对象后为这个对象添加一个onload事件的处理方法和一个onerror事件的处理方法,然后通过定义这个Image对象的src属性来确定要加载的图像。
当远程图片成功加载到本机内存中后,则触发onload事件,如果找不到图片,或者加载失败,则触发onerror事件,代码如下:
img.onload = function () { |
img.onerror = function () { |
这段代码经过测试,正确!
http://www.xcoder.cn/index.php/archives/1019
最新文章
- unsafe
- Main 程序的入口要做哪些事情
- MySQL性能分析及explain的使用
- CSS3 GRID LAYOUT
- [转] C#反射设置属性值和获取属性值
- Swift控制流
- PHP 表单添加隐藏 Token 阻止外部提交
- Noip2009提高组总结
- php 过滤emoji表情
- Microsoft Web Test Recorder在录制时没有显示
- 验证Oracle收集统计信息参数granularity数据分析的力度
- Java 多线程入门
- ubuntu 输入用户名密码又回到登陆界面
- JQ表格隔行换色
- mysql 报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executin
- memcached性能测试之Twemperf
- cached_property的使用
- laravel----------如何优化laravel框架
- wordpress安装主题时提示无法创建目录
- RabbitMQ学习笔记(二):基础概念
热门文章
- fstream读写UNICODE文件
- Bring it on
- Homebrew新一代OS X套件管理工具 高速安装Git
- 【足迹C++primer】46、动态存储类
- LoadRuner性能测试之内存分析方法及步骤(Windows)
- Oracle数据库的创建与验证
- css-选择器-优先级
- MS-SQL数据库备份方法
- Jmail组件发送邮件说明ASP.NET
- AVD启动不了 ANDROID_SDK_HOME is defined but could not find *.ini