layui——上传图片,并实现放大预览
2024-08-21 12:28:41
一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能
function uploadSmallPic() {
var upload = layui.upload;
upload.render({
elem: '#smallPic'
, url: '/upload/uploadPic'
, auto: false
, number: 1
, bindAction: '#uploadSmallPic'
, choose: function (obj) {
var files = obj.pushFile();
obj.preview(function (index, file, result) {
$('#smallPicContent').append('<div style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer' + index + '">' +
'<div class="delete-css"><button id="upload_smallPic_' + index + '" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">' +
'</i></button>' +
'</div>' +
'<img id="showSmallPic' + index + '" style="width:80px;height: 80px" src="' + result + '" alt="' + file.name + '"></div>'
);
//删除某图片
$("#upload_smallPic_" + index).bind('click', function () {
$("#smallPicContainer" + index).remove();
smallPic="";
});
//某图片放大预览
showMedia("showSmallPic" + index, "image", result);
})
},
done: function (res, index) {
smallPic = res.data;
layer.msg(res.msg);
$('#smallPicContent').html('');
return delete this.files[index];
}
});
}
function showMedia(id, type, src) {
var idBar = "#" + id;
$(idBar).bind('click', function () {
var width = $(idBar).width();
var height = $(idBar).height();
var scaleWH = width / height;
var bigH = 500;
var bigW = scaleWH * bigH;
if (bigW > 900) {
bigW = 900;
bigH = bigW / scaleWH;
} // 放大预览图片
if (type == "video") {
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: [bigW + 'px', bigH + 'px'], //宽高
content: "<video width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
});
} else {
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: [bigW + 'px', bigH + 'px'], //宽高
content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
});
} });
}
//删除图片
function deleteMedia(id, index) {
var idBar = "#" + id;
$(idBar).bind('click', function () {
//从map中删除
imgUrlList.splice(index, 1)
//删除div
$("#container" + index).remove();
});
}
但在编辑数据时需要实现数据图片回显
//设置小图
if (resp.data.goods.smallPic != null) {
smallPic = resp.data.goods.smallPic;
$('#smallPicContent').append('<div style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer">' +
'<div class="delete-css"><button id="upload_smallPic_' + '" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">' +
'</i></button>' +
'</div>' +
'<img id="showSmallPic' + '" style="width:80px;height: 80px" src="' + smallPic + '"></div>'
);
//删除某图片
$("#upload_smallPic_").bind('click', function () {
$("#smallPicContainer").remove();
smallPic="";
});
//某图片放大预览
showMedia("showSmallPic", "image", smallPic);
}
最新文章
- 使用python处理子域名爆破工具subdomainsbrute结果txt
- IOS 开发教程
- .Net中的并行编程-1.路线图
- webView(简单的浏览器)
- git 创建branch分支【转】
- cf D. Vessels
- python基础教程第5章——条件循环和其他语句
- mysql 批量更新
- 网络负载均衡环境下wsHttpBinding+Message Security+Windows Authentication的常见异常
- 用原生VideoView进行全屏播放时的问题
- markdown 【demo】
- POJ 1251 Jungle Roads (最小生成树)
- python类型错误:can only concatenate list (not ";str";) to list
- 生成PDF文档之iText
- DG备库无法接受主库归档日志之密码文件
- 数据库——SQL数据单表查询
- Win32建立右键弹出菜单(PopMenu)
- Python基础入门(迭代器和生成器)
- 服务器控件的异步请求——UpdatePanel和ScriptManager
- Windows常用shell命令大全(转)