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