html5

[uniquejava]

File API之读图

见html5 the missing manual 2nd edition page332.

把input file隐藏（太丑），给虚边框区域加onclick ，让他去调用input file的click方法，这样就会打开文件选择对话框，需要事先监听input file的change事件，利用HTML5的File API来处理获取的文件。

<div data-role="content">
    <div class="avatar">
        <div id="avatarImage"></div>
    </div>
    <input type="file" id="inputfile" class="inputfile"/>
</div>

read image

$('#inputfile').on('change', function () {
    var files = this.files;
    var file = files[0];

    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        $('#avatarImage').css('background-image', 'url("' + e.target.result + '")');
    };
    fileReader.readAsDataURL(file);
});
$('#avatarImage').on('click', function () {
    $('#inputfile').click();

})

css

#avatarImage {
    width: 100px;
    height: 100px;
    border: dashed #eeeeee 2px;
    border-radius: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    color: gray;
    text-align: center;
}

#inputfile {
    display: none;
}

[uniquejava]

Web Components

https://css-tricks.com/modular-future-web-components/
https://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/