之前写过一篇上传文件以及图片 都以文件列表展示 今天进阶 图片以图片展示 文件还以文件列表展示 都可进行删除 点击文件名称下载文件 (代码坑能有点冗余,临时赶项目写的 我会注释详细点 大家能看懂就可以简化一下) 上面是效果图
//html代码
<div class="layui-form-item" style="width:calc(100% - 55px)">
<label class="layui-form-label">上传附件:</label>
<div class="layui-upload-drag upload-content" id="uploadFileMaterial">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
</div>
</div>
<div class="layui-form-item" style="margin-left: 160px;">
<!-- 图片展示区域 -->
<div class="imageDataEcho" style="width: 660px;">
</div>
<!-- 文件列表展示区域 -->
<div class="fileDataEcho">
</div>
</div>// 定义文件上传数组
var uploadedFiles = []; // 保存上传文件信息的数组
var uploadedImages = []; // 保存上传成功的图片信息的数组
// 合并后的最终提交数组
var finalUploadArray = [];
var file = ''
//自定义的字段
var uploadFileType = ''
//这两个是定义的字段用来方便下面函数能获取到需要的字段
var fileIndex = ''
var fileResult = ''
layui.use('upload', function () {
var upload = layui.upload;
//执行上传组件 1
upload.render({
elem: '#uploadFileMaterial',
url: uploadFile,
before: function (obj) {
// 预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
//获取字段 赋予全局
fileAAA = file
fileIndex = index
fileResult = result
console.log(index, file, result);
// 判断是否为图片类型
if (/^image\/(jpeg|png|gif|bmp|jpg)$/i.test(file.type) || /\.(jpg|jpeg|png|gif|bmp)$/i.test(file.name)) {
uploadFileType = 'image'
} else {
uploadFileType = 'file'
}
});
},
accept: "file",
headers: {
'dm-authorize-token': $.cookie("token"),
},
done: function (res) {
console.log(fileAAA);
//如果上传文件为文件 拿到数据生成元素 并添加到文件数组中
if (uploadFileType == "file") {
// 创建展示文件名称和删除按钮的元素容器
var fileElement = $('<div class="file-item">' + fileAAA.name + '<a class="delete-btn" data-file-name="' + fileAAA.name + '">X</a></div>');
// 为文件元素添加文件链接属性
fileElement.attr('data-file-url', res.msg);
// 将文件容器添加到指定位置
$('.fileDataEcho').append(fileElement);
// 是其他类型文件
var item = {
type: 'file',
fileName: fileAAA.name,
fileUrl: res.msg
};
// 将文件信息添加到数组中
uploadedFiles.push(item);
console.log('上传文件', uploadedFiles);
//如果上传文件为图片拿到数据生成元素 并添加到图片数组中
} else if (uploadFileType == "image") {
// 是图片类型
var imgElement = $('<div class="image-item" style="max-width: 100px; max-height: 100px; margin-right: 10px; display: inline-block;position:relative"><img src="' + fileResult + '" alt="图片" style="max-width: 100px; max-height: 100px; margin-right: 10px;"><a class="delete-btn2" style="position: absolute;top: 5px;right: 5px;cursor: pointer; " data-index="' + fileIndex + '">X</a></div>');
$('.imageDataEcho').append(imgElement);
// 将图片信息添加到数组中
uploadedImages.push({
type: 'image',
fileName: fileAAA.name,
fileUrl: res.msg
});
console.log('上传图片', uploadedImages);
}
},
error: function () {
//请求异常回调
}
});
});
// 渲染文件列表 //这个是回显数据的时候 将包含文件和图片的数组赋予finalUploadArray 然后循环将对应的内容生成到不同位置 并push到数组
function renderFileList() {
$('.fileDataEcho').empty(); // 清空文件列表
$('.imageDataEcho').empty(); // 清空图片列表
// 遍历上传文件数组
finalUploadArray.forEach(function (file) {
if (file.type == 'file') {
// 创建展示文件名称和删除按钮的元素容器
var fileElement = $('<div class="file-item">' + file.fileName + '<a class="delete-btn" data-file-name="' + file.fileName + '">X</a></div>');
// 为文件元素添加文件链接属性
fileElement.attr('data-file-url', file.fileUrl);
// 将文件容器添加到指定位置
$('.').append(fileElement);
uploadedFiles = [];
uploadedFiles.push(file)
} else if (file.type == 'image') {
var imgElement = $('<div class="image-item" style="max-width: 100px; max-height: 100px; margin-right: 10px; display: inline-block;position:relative"><img src="' + uploadFileUrl + file.fileUrl + '" alt="图片" style="max-width: 100px; max-height: 100px; margin-right: 10px;"><a class="delete-btn2" style="position: absolute;top: 5px;right: 5px;cursor: pointer; " data-index="' + file + '">X</a></div>');
$('.imageDataEcho').append(imgElement);
uploadedImages = [];
uploadedImages.push(file)
}
});
}
// 点击事件监听删除文件
$('.fileDataEcho').on('click', '.delete-btn', function () {
// 阻止事件传播，防止触发文件链接的点击事件
event.stopPropagation();
// 找到对应的文件容器并删除
var fileContainer = $(this).parent();
fileContainer.remove();
// 获取绑定的文件名数据
var fileName = $(this).data('file-name');
uploadedFiles = uploadedFiles.filter(function (file) {
return file.fileName !== fileName;
});
console.log('删除文件', uploadedFiles);
});
// 点击事件监听删除图片
$('.imageDataEcho').on('click', '.delete-btn2', function () {
// 找到对应的图片容器并删除
var imageContainer = $(this).parent();
imageContainer.remove();
// 获取绑定的图片索引数据
var index = $(this).data('index');
uploadedImages.splice(index, 1);
console.log('删除图片', uploadedImages);
});
// 点击事件监听打开链接
$('.fileDataEcho').on('click', '.file-item', function () {
// 判断点击的元素是否是删除按钮，如果是则不进行打开链接操作
if (!$(event.target).is('.delete-btn')) {
// 获取文件链接 判断文件是不是txt格式如果时txt文件，都用common.js 的download方法下载，不在浏览器打开（会乱码）
var fileUrl = $(this).attr('data-file-url');
if (fileUrl.indexOf(".txt") != -1) {
download(uploadFileUrl + fileUrl, fileUrl);
} else {
// 在新标签页中打开链接
window.open(uploadFileUrl + fileUrl, '_blank');
}
}
});
提交数据的时候将文件和图片数组合并成一个
后台需要的字段 = [...uploadedFiles, ...uploadedImages]回显的时候 拿到后台包含图片和文件的数组赋予上面定义的总数组
finalUploadArray = e.data.attachment后面下载数据但是还有点bug 现在也给大家伙排坑 // 获取文件链接 判断文件是不是txt格式如果时txt文件，都用common.js 的download方法下载，不在浏览器打开（会乱码）
// 获取文件链接 判断文件是不是txt格式如果时txt文件，都用common.js 的download方法下载，不在浏览器打开（会乱码）
var fileUrl = $(this).attr('data-file-url');
if (fileUrl.indexOf(".txt") != -1) {
download(uploadFileUrl + fileUrl, fileUrl);
} else {
// 在新标签页中打开链接
window.open(uploadFileUrl + fileUrl, '_blank');
}上面的注释写的很清楚了 在这就不解释了 最后大家记得在每次使用完(提交完表单什么什么的)记得清除文件和图片所在位置的所有元素 和 清空包含数据的数组
// 取消
function cancelProjectBtn() {
projectId = "";
layer.closeAll();
// 重置上传文件
uploadedFiles = []
$('.fileDataEcho').empty(); // 清空文件列表
// 重置上传图片
uploadedImages = []
$('.imageDataEcho').empty(); // 清空图片列表
//清空搜索条件
$("#searchStatus").val('');
$("#searchKey").val(''),
//重新获取表格数据
initUploadTable()
}
7349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
