一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能

  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);
}

最新文章

  1. 使用python处理子域名爆破工具subdomainsbrute结果txt
  2. IOS 开发教程
  3. .Net中的并行编程-1.路线图
  4. webView(简单的浏览器)
  5. git 创建branch分支【转】
  6. cf D. Vessels
  7. python基础教程第5章——条件循环和其他语句
  8. mysql 批量更新
  9. 网络负载均衡环境下wsHttpBinding+Message Security+Windows Authentication的常见异常
  10. 用原生VideoView进行全屏播放时的问题
  11. markdown 【demo】
  12. POJ 1251 Jungle Roads (最小生成树)
  13. python类型错误:can only concatenate list (not &quot;str&quot;) to list
  14. 生成PDF文档之iText
  15. DG备库无法接受主库归档日志之密码文件
  16. 数据库——SQL数据单表查询
  17. Win32建立右键弹出菜单(PopMenu)
  18. Python基础入门(迭代器和生成器)
  19. 服务器控件的异步请求——UpdatePanel和ScriptManager
  20. Windows常用shell命令大全(转)

热门文章

  1. es6中export、export default、import的理解
  2. linux系统解决boot空间不足
  3. Enum枚举法
  4. php pdo prepare真的安全吗
  5. PHP中引入文件的四种方式详解
  6. docker入门之基础操作
  7. SpringCloud2.0
  8. Docker for Windows 启动失败,提示Kubernetes证书无效
  9. vue.js - axios Get、Post方法传参给 .net core webapi。
  10. (转)mysql数据库高可用高扩展性架构方案实施