移动端上传图片 | ibcLee's home

最近做了一个移动端上传并展示图片的功能,利用html5的文件读取功能,简单的记录一下.

<p>
   <label>请选择一个图像文件：</label>
   <input type="file" id="file_input" />
</p>
<div id="result"></div>

var result = document.getElementById("result");
var input = document.getElementById("file_input");
if(typeof FileReader==='undefined'){
    result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
    input.setAttribute('disabled','disabled');
}else{
    input.addEventListener('change',readFile,false);
}
function readFile(){
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        result.innerHTML = '<img src="'+this.result+'" alt=""/>' ;
    }
}

在一般的情况下,都会隐藏type=’file’的默认按钮样式,如需上传展示图片,都会通过trigger实现点击头像,触发type=’file’的click事件来实现点击头像展示区域,实现,上传头像的功能.