js实现添加图片之后回显

HTML代码

 <div class="layui-input-inline"  style="width: 200px;">
      <img id="previewImg" th:src="@{/images/index/phone.png}" style="border-radius: 5px;box-shadow: 0 0 10px black; border: solid palevioletred 1px;width: 200px;height: 250px;">
      <input type="file" accept="image/*" name="pic" id="pic"  style="display: none;">
 </div>

js代码

<scrip>
	$(function () {
         $("#previewImg").click(function () {
                $("#pic").click();
            })

            $("#pic").change(function (e) {
                imgPreview(this,e,$(this));
            })

        });

        function imgPreview(fileDom,e,ele){
            //获取文件
            var file = fileDom.files[0];
            var supportedTypes = [\'image/jpg\', \'image/jpeg\', \'image/png\'];
            if(!(supportedTypes.indexOf(file.type)>-1)){
                alert(\'请选择.jpg、.jpeg,.png格式图片\')
                return;
            }
            var uploadFiles = e.target.files || e.dataTransfer.files;
            console.log(file.type);
            var size=uploadFiles.length;
            for(var i=0;i<size;i++){
                /*读取文件*/
                var reader=new FileReader();
                reader.readAsDataURL(uploadFiles[i]);
                reader.onload=function (e) {
                    var imgBase=e.target.result;
                    ele.siblings(\'img\').attr(\'src\',imgBase).show()
                }
            }
        }
</scrip>