<label for="input" id="placer">
<img id="imgs" style="width: 100px; height: 100px; border-radius: 25px; text-align: center; color: white; font-family: Exo2ExtraBoldItalic; background-color: #323232; font-size: 70px; vertical-align:middle; " src="" alt="+">
</label>
<input style="display:none;" type="file" id="files" name="files" >
<script>
document.getElementById('placer').onclick = function(){
document.getElementById('files').click();
}
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('imgs').src = [e.target.result].join('');
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener( 'change', handleFileSelect, false);
</script>
текст корявый но на сколько у меня знаний хватило на столько и сделал (собирал по частям из того что нашел)- уважаемые хавцы - если есть возможность отредактировать буду признателен!
значит по CSS - 1. контур рамки так и не смог победить , 2 после добавления фото легкий контур присутствует , а не должно его быть.