HTML5 FileReader

<!--上传照片-->
<section class="box-3">
    <ul>
        <li id="result_1"><input type="file" id="file_input_1" /></li>
        <li id="result_2"><input type="file" id="file_input_2" /></li>
        <li id="result_3"><input type="file" id="file_input_3" /></li>
    </ul>
    <h3>把您的美丽给大家分享一下吧~</h3>
</section><!--box-3-->

//上传图片
var input_1 = document.getElementById('file_input_1');
var input_2 = document.getElementById('file_input_2');   
var input_3 = document.getElementById('file_input_3');
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var result_3 = document.getElementById('result_3');
if(typeof FileReader === 'undefined'){
    alert("抱歉，您的浏览器不支持FileReader");
}else{
    input_1.addEventListener('change',function(event){
        readFile(event,"1");
    },false);
    input_2.addEventListener('change',function(event){
        readFile(event,"2");
    },false);
    input_3.addEventListener('change',function(event){
        readFile(event,"3");
    },false);
}
function readFile(event,obj){
    var file = event.target.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("请选择正确的图像类型");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        $('#result_'+obj).css({background:"url("+this.result+") no-repeat center center",backgroundSize:"60px 60px"});
    }
}

http://blog.csdn.net/zk437092645/article/details/8745647