注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

移动Web开发之HTML5文件上传  

2013-09-21 00:02:14|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
iOS在浏览器中限制访问本地文件,并且不支持Flash,所以没有一个比较好的办法在浏览器中进行文件的上传。幸运的是iOS 6中放开了上传限制。通过指定HTML5<input>标签的type属性为“file”建立一个文件上传入口,可以访问相册和相机。

<input type="file"></input>

原始按钮样式太不高端,太不大气,太不上档次,设计师肯定是接受不了的,移花接木:

<a class="uploadButton"><input id="uploadInput" type="file" style="display:block;height:40px;width:45px;opacity:0;"></input></a>

监听“onchange”事件,响应上传操作:

$("#uploadInput").listen("change", fOnChange);

onchange事件句柄:

function fOnChange(){

var oFile = this.files[0],

sName, 

sFileType = oFile.type;

nSize = 0,

nModTime;


// Android下读不到type信息,从文件名中解析

if(!sFileType){
sFileType = "image/" + sName.split(".").pop().toLowerCase();
}


// 读取文件大小、修改时间等信息

var oUploadInfo = {

name : oFile.name || oFile.fileName,

size : oFile.size || oFile.fileSize,
modTime : oFile.lastModifiedDate.valueOf(),
blob : oFile,
img : rFilter.test(sFileType)

};

......

// 具体上传逻辑,视具体服务器端接口而定

......

}

上传的图片显示base64缩略图:

var oImg = document.createElement("img");
// 加载图片
oListEl.append(oImg);
// 使用FileReader读取

var oReader = new FileReader();
oReader.onload = function(e){
var sBase64 = e.target.result;
// 部分Android下base64字符串格式不完整
if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){
var sMime = sName.split(".").pop().toLowerCase();
sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,");
}
oImg.src = sBase64;
sBase64 = null;
}
oReader.readAsDataURL(oFile);

特别提醒一下:虽iOS和Android平台都自带webkit核心浏览器,使得前端开发者摆脱了IE的束缚,可以去尝试更多的HTML5新特性,但Android平台由于版本和机型众多,对特性的支持程度或者实现细节参差不齐,需要我们开发和测试过程要特别注意。


by Shaotu
  评论这张
 
阅读(33945)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017