input[type=file] с заменой на картинку
 

в Джаве полный ноль - но чую все решается через нее
на jave сделать input = file при при нажатии - происходит запрос на подгружение картинки которая в итоге отображается в окошке самого изображения input = file + где то в хидене инфа о файле для php, без перегрузки страницы.

картинки нужны только для того что я зугружу в плюсики

большое окно поле ввода текста ...

<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 после добавления фото легкий контур присутствует , а не должно его быть.