H5图片上传应用开发中的那些坑……

Author : lovecicy

图片上传是web应用开发中非常常见的功能,在桌面应用开发中,我们有很多插件,比如jQuery File Upload、uploadify,但是在移动端,jQuery太重,而且我们又有许多HTML5的API可以使用,所以,在新的项目里,选择了使用HTML5的file API来实现图片上传的功能。但是,坑也不少啊/(ㄒoㄒ)/~~ 1. 项目介绍 项目中需要上传图片,作为头像或者作为文章的图片。因为没有使用jQuery,也没有使用zepto,而且使用场景只是在移动端,因此选择了不使用插件,使用HTML5的file API。 2. 使用方法 file API的使用方法很简单,可以拆解为以下几步: 在HTML中添加一个input组件,type类型设置为file。 监听input的change事件。 在事件处理函数中,用FileReader api读取图片内容。 监听FileReader对象的onloadend事件,当读取文件完成时,上传图片。 3. 坑们 1. ios下alert弹框会挂 在选择图片后,首先判断图片的类型是否在限定的类型内、图片大小是否超出限定大小,如果超出,则弹出弹框提示用户[Read More]

standard

Mobile Web开发奇淫巧计

Author : luckyGirl

做了一段时间的Mobile Web开发,遇到一些坑,总结一下: HTML <meta> HTML5 开发一个页面适配所有设备,先从配置<meta>各种标签属性开始。 viewport: 对文档的视图进行配置,示例有强制文档宽度为设备宽度;初始化缩放比例是1:1;最大缩放比例是1;不允许用户进行屏幕缩放;其他属性如minimum-scale,height等 apple-mobile-web-app-capable:IOS特有标签,是否允许全屏模式浏览 apple-mobile-web-app-status-bar-style:Safari顶端状态条颜色 format-detetion:格式检测,是否把数字识别为电话号码,是否识别邮箱 http-equiv=”x-dns-prefetch-control”:DNS Prefetch 是一种DNS预解析技术,对网页中的域名进行解析缓存,减少用户等待时间,提高用户体验  CSS 1px边框 由于Retina屏幕的出现,设置1px的边框,实际上却显示2px,有时就会略显粗壮,用JS可以进行处理,但兼[Read More]

standard

利用HTML5新特性让Ajax改变URL,支持前进后退

Author : lovecicy

最近用到了一个HTML5的新特性:hashchange 事件,此事件监听浏览器地址栏URL”#”号后面的内容的变化。因为浏览器的history会记录hash变化,所以可以利用这个API,让Ajax支持浏览器的前进和后退按钮。 但是后来发现了一个更好的方案:使用HTML5的history API。这样,就可以正常修改URL了,而且同样支持浏览器的前进和后退按钮,但必须保证URL是可访问的。 在HTML5之前,history API只有一个length属性,在支持HTML5的浏览器中,会有一个state属性,同时多了两个方法:pushState()和replaceState(),这两个方法配合window.popstate事件一起工作。 当你在A页面上点击一个链接时,触发了一个Ajax请求,请求返回后通过js修改了页面显示。如果这时候返回了主页,再点击浏览器的返回按钮,你想回到被修改了的A页面,但是,你只会回到初始的A页面。这时候,如果在发送Ajax请求前使用history的pushState()方法,就可以把目标地址推送进浏览器的历史记录,于是浏览器的地址栏发生变[Read More]

standard