通过layui实现图片的上传和预览

LAYUI

---

一、HTML

首先，我们在HTML部分创建了一个表单项，包括一个标签、输入框和一个图标按钮。输入框有一个名为pic的属性，这个属性用来表示所上传的图片文件。在这个输入框中，我们将它设置为只读模式，并且添加了一个类名input-pic。

<div class="layui-form-item">
    <label class="layui-form-label">上传图片</label>
    <div class="layui-input-block">
        <!-- 绑定上传图片的事件 -->
        <input type="text" name="pic" lay-verify="required" placeholder="请选择图片" autocomplete="off" class="layui-input input-pic" onclick="uploadImg()" readonly>
        <!-- 绑定预览图片的事件 -->
        <i class="layui-icon layui-icon-picture layui-btn" onclick="previewImg()"></i>
    </div>
</div>

二、CSS

接着，在CSS部分中，我们定义了一个名为preview-img的类，用于定义预览图片时所需的样式，包括图片大小、居中方式等。

.preview-img {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}
.preview-img img {
    max-width: 100%;
    max-height: 100%;
}

三、JS

在JavaScript部分，我们定义了3个函数：chooseImg(callback)、uploadImg()和previewImg()。

chooseImg(callback)函数用于选择上传的图片，并将其转换成Base64编码，以便后续操作使用。这个函数的大体过程是，首先创建一个input元素作为选择文件的入口，然后当用户选择了一个文件后，通过FileReader对象将文件转换成Base64编码，并将其作为回调函数的参数返回。

function chooseImg(callback) {
    // 创建选择文件的input元素
    var inputElement = document.createElement("input");
    inputElement.setAttribute("type", "file");
    inputElement.setAttribute("accept", "image/*");
    // 当用户选择了一个文件时
    inputElement.onchange = function() {
        var file = inputElement.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                // 将文件编码为Base64字符串
                var base64 = e.target.result;
                // 调用回调函数，将Base64编码作为参数传递
                callback(base64);
            };
            reader.readAsDataURL(file);
        }
    }
    inputElement.click();
}

uploadImg()函数用于调用chooseImg(callback)函数来选择并上传文件。当选择文件后，函数将文件的名称作为输入框的值，将文件的Base64编码存储在输入框的data-base64属性中。同时，如果输入框有一个类名为input-pic，则会将图片文件名赋值给这个元素的value属性。

function uploadImg() {
    chooseImg(function(base64) {
        // 获取图片名和input元素
        var picName = arguments[1];
        var picInput = document.getElementsByName("pic")[0];
        // 将图片名和Base64编码存储在input元素中
        picInput.dataset.base64 = base64;
        if (picInput.classList.contains("input-pic")) {
            picInput.value = picName;
        }
    });
}

previewImg()函数用于预览上传的图片。当这个函数被调用时，它会从输入框中读取Base64编码，并使用Layui的弹窗组件展示预览图片。预览的图片居中，大小为宽500px、高500px，并水平和垂直居中。

function previewImg() {
    // 从input元素中读取Base64编码
    var picInput = document.getElementsByName("pic")[0];
    var base64 = picInput.dataset.base64;
    if (base64) {
        // 使用Layui的弹窗组件展示预览图片
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            skin: 'layui-layer-nobg',
            area: ['500px', '500px'],
            content: '<div class="preview-img"><img src="' + base64 + '"></div>'
        });
    }
}

总结

在HTML部分和JavaScript部分中，我们都使用了一些Layui组件来帮助我们实现这个功能。我们使用了layui-form和layui-input类来创建表单项，使用layui-icon和layui-btn类来创建图标按钮，并使用Layui的弹窗组件来展示预览图片。