文章关键字 ‘Ajax’

HTML5 file API加canvas实现图片前端JS压缩并上传

2017年07月30日,星期日

很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!

阅读全文…

HTML input type=file文件选择表单元素二三事

2015年11月24日,星期二

本文一些简单tips整理,没有深入具体的技术细节。考虑到一些童鞋的HTML基础不是很扎实,因此,本文的一些内容说不定可以博闻强识下。有截图有源代码展示,没demo,嘻嘻……

阅读全文…

XMLHttpRequest实现HTTP协议下文件上传断点续传

2013年11月5日,星期二

XMLHttpRequest实现HTTP协议下文件上传断点续传
目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端或Swf控件,也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法——slice方法。

该方法为断点续传提供了有力的技术支持。

阅读全文…

ajax与HTML5 history pushState/replaceState实例

2013年06月19日,星期三

众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。

阅读全文…

基于HTML5的可预览多图片Ajax上传

2011年09月15日,星期四

在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张。要一次上传多图,做法是借助于flash。或者使用隐藏的iframe框架页面模拟ajax上传,一次一张,连续多次。然而都有缺陷。HTML5是个好东东,其中之一就是支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,纯粹利用file控件实现,简单方便迅速,想不让人称赞都难啊!

本文就是详细地介绍基于HTML5的可预览多图片Ajax上传的一些内容。有丰富的截图示意和源代码展示,以及必要的API参数说明。希望本文的内容能够对您的学习有所帮助。

阅读全文…

最近整的MooTools库下Mbox弹框插件

2010年11月17日,星期三

不知道数年前,公司的前辈出于什么原因选择了MooTools库(貌似在国内不是很热),用Google趋势一搜这5个js库jQuery, mootools, YUI, dojo,extjs,结果如下图:
js库索引流行对比 张鑫旭-鑫空间-鑫生活

可怜的MooTools库垫底,但是,研究研究此库还是学到不少东西的,其OO思想,就如同JavaScript高级程序设计书中所展示的一样,基础不佳者往往很难驾驭,学习门槛高限制了其蓬勃发展啊,你看人家jQuery,即使JavaScript很初级的人也能整出点小花样,这种感觉就是——即使我很菜,我也能泡到美女,你说人家能不招人喜欢吗?

阅读全文…

textField – jQuery文本域操作集插件展示

2010年10月26日,星期二

老早就有个想法,要把文本域(正规叫法为“多行文本输入框”,我个人喜欢称之为“文本域”)相关的一些操作啊效果啊什么的全部集中到一起,然后以后使用的时候就不要再去分别写啦。酝酿的差不多了,就抽了两个晚上把这个几乎集textarea文本域相关的一些交互全部集中到了一个js文件中,我将其命名为jquery.textField.js。

这是一个关于多行文本框的还算蛮强大的插件,其功能包括:文字还可以(需要)输入或是超出的提示,文字个数合法与否与按钮可用与否的关联,失去焦点获得焦点多行文本框的样式变化,支持默认的文字提示在隐藏与显示,历史记录,Ajax自动保存等。本文提供截图效果展示,提供demo展示,一些源代码展示,同时对各个API参数进行的简单的介绍。希望能对您的学习提供帮助。

阅读全文…

新版无图片版zxxbox jQuery弹出框插件

2010年09月7日,星期二

当初写zxxbox jQuery弹出框插件纯粹是学习的目的,另外就是临时应付个人站点上的一些弹框应用。所以写得比较简单,业余,并没有期望谁会去使用它。但是,后来,一些同行的留言以及相关的交流发现,还是有人使用此轻便,简洁的弹框效果的。

但是,一方面由于自己之前的水平比较稚嫩,同时,对插件的逻辑没有很好的梳理。所以,之前版本的弹出框插件,虽然也能用,但是,功能确实有效,不能给内置的弹框按钮添加回调方法,不支持Ajax加载,而且,还有些小的隐晦的bug等,在调用上也是有点不利索的。所以,这几天,我就把之前的zxxbox弹出框插件重新写了下。虽然弹框的UI界面还是更之前的一样,但是,内部的逻辑,调用,以及参数等都有所不同,可以说是从底层核心都改变了。所以,只是简单的以插件更新的方式放在之前的文章下,则会有有力使不出的感觉。故,另起一篇文章,对新版的zxxbox弹出框插件参数,使用等细致地讲解下,希望对有需要的同行有所帮助。

阅读全文…

jQuery Pagination Ajax分页插件中文详解

2010年01月31日,星期日


看标题就应该知道本文的内容了,没错,我对jQuery Pagination Ajax分页插件项目页面做了中文翻译,其中还做了新的中文首页,其他的话就不说了,总之,相信会对您的学习有所帮助的。

阅读全文…

jQuery图片文本滚动切换插件jCarousel中文翻译与详解

2009年12月25日,星期五

图片滚动切换显示插件
jCarousel是一款历史悠久,功能强大的图片或文字等列表内容滚动切换显示插件。可以自定义皮肤,可以自定义显示的方向,可以从外部控制每次切换显示的元素的个数,动画的时间等。可以切换任何形式的数据,静态的HTML,动态的文本数据,JavaScript数据,Ajax请求的XML数据,JSON,feed订阅数据等,都可以切换显示。优点真是很多。网上推荐这款插件的文章不少,但是真正好好研究这个插件的文章就很少。我从昨晚10点一直到现在,连续奋战10多个小时终于完成了这款插件的源文件讲解及全部demo为中文翻译。
在这篇文章里,您会看到中文翻译后的插件使用等详尽的介绍,提供一一对应的中文版demo页面,提供中文版的源文件下载。希望对您有所帮助。

阅读全文…