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