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的弹窗组件来展示预览图片。