引言 无线端开发和PC端开发,很大的不同,在于要考虑用户的网速以及流量开销。上传图片作为很普通的需求,在很多地方都用的到,但是在无线端,有很多不同之处。 IOS不支持flash,使得无法使用成熟的桌面端的上传组件,比如基于flash的swfupload 图片上传需要压缩–基于流量原因 无线端可以不考虑低版本的IE浏览器,但是存在更多的兼容问题,更为细节。 需求设定 上传前可预览 上传时,如果图片体积太大,则进行压缩 准备工作 一个简单的html html里包含一个文本域 ,id 为 file 读取文件,完成预览 html5 提供了File API 和FileReader API ,允许js读取图片信息 这里有一个兼容性修正,某些低版本的android浏览器中,读出来的base64缺少字节。 结果如下 对图片进行压缩 压缩的方法是,讲图片用drawImage的方法写入canvas,然后再通过toDataURL 读出来   对于移动端浏览器来说,toDataURL只能返回png图片数据,jpg是不被支持的 w和h,是压缩后的大小,在不同的需求里,可以重写这部分,达到压缩不变形的目的。 ajax上传图片 使用base64上传图片 或者使用binary上传,但是由于移动端对formData的支持度不好,所以只能通过流上传 本次使用base64上传 上传后,处理上传图片。