移动Web开发之HTML5文件上传

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平台由于版本和机型众多，对特性的支持程度或者实现细节参差不齐，需要我们开发和测试过程要特别注意。