layui图片上传与预览图片

最新推荐文章于 2024-07-31 17:38:22 发布

abcdefghijk12345636

最新推荐文章于 2024-07-31 17:38:22 发布

阅读量418

点赞数

分类专栏： 123

本文链接：https://blog.csdn.net/hujgg/article/details/118099485

版权

123 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<div class="imageShow">
    <img id="uploadImageShow" src=""  onclick="previewImg(this) "/>
</div>

    .imageShow {
        margin-top: 16px;
        width: 200px;
        height: 200px;
        border: 1px solid rgba(151, 151, 151, 1);
    }

    .imageShow>img {
        width: 100%;
        height: 100%;
    }

                var images
            var btnUploadText = '上传';
            $(document).ready(function () {
                $("#uploadButton").text(btnUploadText)
                $(".imageShow").hide()
                $('#uploadButton').click(function () {
                    $('#imagePic').click();
                });
                $("#imagePic").on("change", function (e) {
                    var file = e.target.files[0]; //获取图片资源
                    image=file
                    $('#image').val(file)
                    var fileTypes = ["bmp", "jpg", "png", "jpeg"];
                    var bTypeMatch = false
                    for (var i = 0; i < fileTypes.length; i++) {
                        var start = file.name.lastIndexOf(".");
                        var fileType = file.name.substring(start + 1);
                        if (fileType.toLowerCase() == fileTypes[i]) {
                            bTypeMatch = true;
                            break;
                        }
                    }
                    if (bTypeMatch) {
                        if (file.size <= 1024 * 1024 * 10) {
                            var reader = new FileReader();
                            reader.readAsDataURL(file); // 读取文件
                            // 渲染文件
                            reader.onload = function (arg) {
                                console.log(arg.explicitOriginalTarget.result)
                                images=arg.explicitOriginalTarget.result

                                $(".imageShow").show()
                                $("#uploadImageShow").attr("src", arg.target.result)
                                btnUploadText = '重新上传'
                                $("#uploadButton").text(btnUploadText)
                            }
                        } else {
                            alert('仅支持不超过10M的图片');
                            emptyImageUpload("#imagePic")
                            $("#uploadImageShow").attr("src", "")
                            $(".imageShow").hide()
                            btnUploadText = '上传'
                            $("#uploadButton").text(btnUploadText)
                            return false;
                        }
                    } else {
                        alert('仅限bmp，jpg，png，jpeg图片格式');
                        emptyImageUpload("#imagePic")
                        $("#uploadImageShow").attr("src", "")
                        $(".imageShow").hide()
                        btnUploadText = '上传'
                        $("#uploadButton").text(btnUploadText)
                        return false;
                    }
                });
            })

   //layui预览图片  

 function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' />";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px',height+'px'],
                shadeClose:true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }