iOS在浏览器中限制访问本地文件,并且不支持Flash,所以没有一个比较好的办法在浏览器中进行文件的上传。幸运的是iOS 6中放开了上传限制。通过指定HTML5标签的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 &amp;amp;&amp;amp; 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);</pre>

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