js实现上传图片之后回显

最新推荐文章于 2024-08-08 14:28:29 发布

迪克言仔

最新推荐文章于 2024-08-08 14:28:29 发布

阅读量1.1k

点赞数 2

分类专栏： java 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45018444/article/details/105576963

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>