效果如下,可以设置最大上传张数,可以点击放大镜预览,点击删除按钮删除,有图片的话可以加载。
使用方法如下:
在需要上传图片的地方插入如下html:
`<p><span class="left-title">${key}:</span>
<div class="form-group form-item" flex="cross:top">
<div class="case">
<div class="upload" action='http://0.0.0.0:80/file/file/uploadFile' data-num='3' data-value='${json[key]=='暂无数据'?'':json[key]}' id='filetext1' data-name="filetext1"></div>
</div>
</div>
</p>`
插入预览图片的html:
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:1000;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;z-index: 1000" src="" />
</div>
</div>
调用方法:
$("#filetext1").upload(
function(_this,data){
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this,data);
}
);
预览方法:
function imgShow(outerdiv, innerdiv, bigimg, _this,data){
var src = data;//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小,并显示弹出层及大图*/
$("<img/>").attr("src", src).on("load",function(){
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
if(realHeight>windowH*scale) {//判断图片高度
imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放
imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
imgWidth = windowW*scale;//再对宽度进行缩放
}
} else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度
imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放
imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求,高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
});
$(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
参数配置:
标签 | 默认值 | 说明 |
data-height | 0 | 图片上传压缩最大高度,0则根据宽度等比例压缩 |
data-width | 1920 | 图片上传压缩最大宽度,0则根据高度等比例压缩 |
data-type | png,jpg,jpeg,gif | 允许上传文件的扩展名,多个扩展名用逗号分割,支持非图片格式的文件上传 |
data-file | file | 上传提交服务器的表单名 |
data-name | uoload | 最终表单提交图片路径的表单名 |
action | /upload.php | 服务器接收上传文件的地址,服务器需返回{"code":1,"msg":"/upload/1.jpg"}的JSON字符串,code为上传状态,1为成功,0为失败,msg为成功的文件路径或失败原因提示! |
data-num | 10 | 最多可以上传多少个文件,如为1,上传插件为单个文件上传样式 |
data-size | 20480 | 文件上传单个文件最大容量,图片不传不受该属性限制 |
data-value | null | 已经上传成功的文件名,多个文件用英文逗号分割 |
需要引用的js及css文件如下