移动Web开发之HTML5文件上传
2014-05-06 16:55
513 查看
iOS在浏览器中限制访问本地文件,并且不支持Flash,所以没有一个比较好的办法在浏览器中进行文件的上传。幸运的是iOS 6中放开了上传限制。通过指定HTML5<input>标签的type属性为“file”建立一个文件上传入口,可以访问相册和相机。
原始按钮样式太不高端,太不大气,太不上档次,设计师肯定是接受不了的,移花接木:
监听“onchange”事件,响应上传操作:
onchange事件句柄:
上传的图片显示base64缩略图:
特别提醒一下:虽iOS和Android平台都自带webkit核心浏览器,使得前端开发者摆脱了IE的束缚,可以去尝试更多的HTML5新特性,但Android平台由于版本和机型众多,对特性的支持程度或者实现细节参差不齐,需要我们开发和测试过程要特别注意。
<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平台由于版本和机型众多,对特性的支持程度或者实现细节参差不齐,需要我们开发和测试过程要特别注意。
相关文章推荐
- Web开发之JspSmartUpload实现文件上传下载
- [HTML5]移动Web应用程序开发 HTML5篇 (一) HTML5简介
- 【收藏】本周ASP.NET英文技术文章推荐[09/30- 07/13]:.NET Framework、JSON、Google Analytics、文件上传、GridView、IIS 7、Web开发
- Spring Boot基础教程12-web应用开发-文件上传
- PHP移动互联网开发笔记(5)――文件的上传下载
- Portal-Basic Java Web 应用开发框架:应用篇(四) —— 文件上传和下载
- WEB开发文件上传存储,虚拟路径配置问题。
- JavaWeb文件上传开发实例
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- HTML5开发 拖拽文件上传
- adt配置支持html5的移动web app开发环境
- web应用开发-文件上传
- [HTML5]移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试
- Web开发中的文件上传组件uploadify的使用
- HTML5开发移动web应用—JQuery Mobile(1)
- 浅淡HTML5移动Web开发
- HTML5开发移动web应用——SAP UI5篇(7)
- 如何在移动web上上传文件..
- JavaWeb开发之网站实现文件上传功能
- HTML5开发 拖拽文件上传