选择图片显示到视图

藜笙

已于 2022-06-23 21:03:17 修改

阅读量116

点赞数

分类专栏： javascript 文章标签：前端 java servlet

于 2022-06-23 19:44:28 首次发布

本文链接：https://blog.csdn.net/HG13542386794/article/details/125433694

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<body>
    <input type="file" id="image" hidden accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"/>
    <div class="box">
        <img src="" id="img" name="img" class="img-thumbnail layui-icon-picture" alt="双击选择图片" style="height:186px;width:130px;" />
    </div>
    <script src="~/Content/jquery-3.2.1.min.js"></script>
    <script>
        $("#img").dblclick(function () {
            $("#image").click();
        });

        var imgReadere = new FileReader();
        var regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|imag\/png)$/i;

        $("#image").change(function () {
            var file = $("#image").get(0).files[0];
            if (regexImageFilter.test(file.type)) {
                imgReadere.readAsDataURL(file);
            } else {
                layer.alert("该文件属于非图片,请选择图片文件!");
            }
        })

        imgReadere.onload = function (event) {
            $("#img").attr("src", event.target.result);
        }

    </script>
</body>