input文件框的选择图片以及在固定位置回显

思路：
首先给img一张默认的图片（或者将p标签设置宽高固定的空白样式，不给图片默认值），

点击文件框的时候，触发打开本地文件夹的方法，选择图片后，将图片这个文件回显到img标签。

同时 input 文本框也是非常方便和form表单一同提交，不像其他的上传组件，呵呵呵。

代码如下

html代码：

input 文本框

 <div class="col-md-12">
	<p onclick="fileSelect()">
		<img class="normalFace" id="avatar" th:src="" style="width: 50;height: 50">
	</p>
 	<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" style="display:none;">
  </div>

js部分：

   //打开本地文件夹
    function fileSelect() {
        document.getElementById("fileToUpload").click();
    }

    //图片回显
    function fileSelected() {
        // 文件选择后触发次函数
        let files=  document.getElementById('fileToUpload').files;
        console.log(files[0]);


        var reader = new FileReader();

        reader.readAsDataURL(files[0]);
        reader.onloadend = function(e) {
            $("#avatar").attr("src", e.target.result);
        };

        //展示图片
        var images = document.getElementById('avatar');
        images.style.width = "100px";
        images.style.height = "100px";


    }