二次开发，向dom中插入容器，完成点击显示大图。

本文链接：https://blog.youkuaiyun.com/lijj_html5/article/details/68927381

本文介绍了一个基于网页的图片上传功能实现方法，包括图片预览、点击放大查看及下载功能。通过JavaScript和jQuery实现了图片元素的动态绑定与交互，确保了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//绑定selectchange事件，这个是项目中弹出页面加载完成时触发的事件，无太大关系。
function oninitfillforms(fillforms){
fillforms.on("loadform",function(event){
debugger;
loadimg()
emptyClick();
setUploadDefaultImage();
UploadImage();
})

createImgDiv();
};
/* 获取被点击要下载的图片，并设置无图片时禁止点击*/
function loadimg(){
$(document).on("mouseenter",".sz-commons-fileupload-image-item",function(){
var imgsrc=$(this).find('.sz-commons-fileupload-image-image').attr("src");
if(imgsrc){
var addimg=$(this).siblings('.sz-commons-fileupload-image-buttons').find('.lianjie');
addimg.attr('href',imgsrc);
addimg.attr('download');
}else{
$(this).siblings('.sz-commons-fileupload-image-buttons').find('.lianjie').removeAttr('href');
}
});
};
/*解决图片闪烁bug*/
$(document).on("click",".sz-commons-fileupload-image-item",function(){
var imgsrc=$(this).find('.sz-commons-fileupload-image-image').attr("src");
if(imgsrc){
$('.bigimg').show();
$('.bigimg img').attr("src",imgsrc);
}
});
$(document).on("mouseenter",".bigimg",function(){
$('.bigimg').show();
});
$(document).on("mouseleave",".sz-commons-fileupload-image-item",function(){
$('.bigimg').hide();
});
$(document).on("mouseleave",".bigimg",function(){
$('.bigimg').hide();
});
$(document).on("mouseenter",".bigimg",function(){
$('.bigimg').show();
});
$(document).on("mouseleave",".sz-commons-fileupload-image-item",function(){
$('.bigimg').hide();
});
$(document).on("mouseleave",".bigimg",function(){
$('.bigimg').hide();
});
/*设置图片框，将系统自动默认点击事件清空*/
function emptyClick(){
$('.sz-commons-fileupload-image-item').attr("onclick", "");
};
/*增加大图容器*/
function createImgDiv() {
// debugger;
var Bigimg= document.createElement("div");
Bigimg.setAttribute("class",'bigimg');
Bigimg.style.position = 'absolute';
Bigimg.style.top = '130px';
Bigimg.style.left = '50%';
Bigimg.style.margin = '0 0 0 -400px';
Bigimg.style.display = 'none';
Bigimg.style.zIndex = 1000009;
//var a=document.createElement("a");
//a.setAttribute("class",'lianjie');
var img= document.createElement("img");
img.style.display = 'block';
img.style.maxWidth = '100%';
img.style.maxHeight = '400px';
img.style.margin = '0 auto';
//a.appendChild(img);
Bigimg.appendChild(img);
document.body.appendChild(Bigimg);
}
/*创建下载图片按钮*/
function UploadImage(){
debugger;
var father= document.getElementsByClassName('sz-commons-fileupload-image-buttons');
for(var i=0;i<father.length;i++){
var span =document.createElement("span");
span.style.width='16px';
span.style.height='16px';
span.style.display='inline-block';
span.style.background='url(/meta/ZLreport:/collections/WL/WLZL/WL03/ZLSJBG/resources/images/download.png)';
var a=document.createElement("a");
a.setAttribute("class",'lianjie');
a.appendChild(span);
father[i].appendChild(a);
}
};
/*设置上传默认背景图片*/
function setUploadDefaultImage() {
$(".sz-commons-fileupload-image-default").css("background", "url(/meta/ZLreport:/collections/WL/WLZL/WL03/ZLSJBG/resources/images/moren.png) no-repeat center center")
}