图片预览

Posted 2020-11-03 赵羴

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<%@ attribute name="count" type="java.lang.String" required="true"%>
<style type="text/css">
.imgDiv {
display: inline-block;
position: relative;
}

.imgDiv .delete {
position: absolute;
top: 0px;
right: 0px;
width: 10px;
height: 10px;
display: none;
}
</style>
<script type="text/javascript">
var i=0;
function fileSelects(obj,id) {
if($("#"+id).attr("readonly") && $("#"+id).val() != "" ){

if(navigator.userAgent.match(/(iPhone|iPod|android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
width=‘auto‘;
height=‘auto‘;
}else{//如果是PC端，根据用户设置的width和height显示。

}
layer.msg("<img width=‘400px‘ height=‘400px‘ src="+obj.src+">",{
time: 2000000000,
area: [‘500px‘, ‘500px‘],
btn: [‘关闭‘]
});
return;
}
document.getElementById(""+id).click();
$("#"+id).attr("readonly", true);
}

function addhtml(){
var pPartm = "‘fileToUploads"+i+"‘";
var inputPartm = "‘imgFile"+i+"‘";
if( i <‘${count}‘){
var divHtml= ‘<td><div class="imgDiv"><img id="imgFile‘+i+‘" class="normalFace active" width="100px" height="100px" src="${ctxStatic}/images/image.png" onclick="fileSelects(this,‘+pPartm+‘);"><a onclick="deleteImg1(this)"><img src="${ctxStatic}/images/close_hover.png" class="delete" /></a></div>‘
var inputHtml=‘<input type="file" name="files" id="fileToUploads‘+i+‘" onchange="previewImgs(this, ‘+inputPartm+‘)" style="display:none;"> </td>‘;
$("#fileDiv").append(divHtml);
$("#fileDiv").append(inputHtml);
init();
i++;
}
}

//预览图片
function previewImgs(file, imgId){
if(file.value==""){
return;
}
var type = file.value.substring(file.value.lastIndexOf("."));
if(type !=".jpg" && type !=".png" && type !=".gif"){
layer.msg("图片格式不正确，请重新上传！",{icon: 2})
document.getElementById(imgId).src ="${ctxStatic}/images/image.png";
file.value ="";
$("#"+file.id).attr("readonly", false);
return;
}

var size= Math.floor((checkImgSize(file)/1024/1024)*100)/100;
if(size > 5){
layer.msg(‘图片最大支撑5M，现在图片‘+size+‘M，请重新上传！‘,{icon: 2})
document.getElementById(imgId).src ="${ctxStatic}/images/image.png";
file.value ="";
$("#"+file.id).attr("readonly", false);
return ;
}
addHtml();
var img = document.getElementById(imgId);
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function(evt){
var reg = /^data:base64,/;
var res = evt.target.result;
if(reg.test(res)){
res = res.replace(reg, "data:"+file.files[0].type+";base64,");
}
img.src = res;
s = res;
};
} else {
img.src = file.value;
}
}
// 检测上传图片大小
function checkImgSize(file) {
var size = 0;
if (file.files && file.files[0]) {
size = file.files[0].size;
} else {
var img = document.createElement("IMG");
img.src = file.value;
var timer = setInterval(function(){
if (img.fileSize > 0) {
clearInterval(timer);
}
size = img.fileSize;
}, 100);
}
return size;
}

$(document).ready(init);
function init() {
$(".imgDiv").mouseenter(function () {
$(this).find(".delete").show();

});

$(".imgDiv").mouseleave(function () {
$(this).find(".delete").hide();
});

}

function removeClass(obj, cls){
var obj_class = ‘ ‘+obj.className+‘ ‘;//获取 class 内容, 并在首尾各加一个空格. ex) ‘abc bcd‘ -> ‘ abc bcd ‘
obj_class = obj_class.replace(/(\s+)/gi, ‘ ‘),//将多余的空字符替换成一个空格. ex) ‘ abc bcd ‘ -> ‘ abc bcd ‘
removed = obj_class.replace(‘ ‘+cls+‘ ‘, ‘ ‘);//在原来的 class 替换掉首尾加了空格的 class. ex) ‘ abc bcd ‘ -> ‘bcd ‘
removed = removed.replace(/(^\s+)|(\s+$)/g, ‘‘);//去掉首尾空格. ex) ‘bcd ‘ -> ‘bcd‘
obj.className = removed;//替换原来的 class.
}

function deleteImg1(obj){
var firstImg= obj.parentNode.firstChild;
var activeDiv = $("div .active ");
if(activeDiv.length == 1){
if(firstImg.src != ‘${ctxStatic}/images/image.png‘){
firstImg.src = ‘${ctxStatic}/images/image.png‘;
$("#fileToUploads").attr("readonly", false);
$("#fileToUploads").val("")
}else{
$("#fileToUploads").attr("readonly", false);
$("#fileToUploads").val("")
}
return;
}
removeClass(firstImg,"active");
var par =obj.parentNode.parentNode.parentNode;
par.removeChild(obj.parentNode.parentNode);

}

</script>
<table >
<tr id="fileDiv">
<td>
<div class="imgDiv"><img id="imgFiles" class="normalFace active" width="100px" height="100px" src="${ctxStatic}/images/image.png" onclick="fileSelects(this,‘fileToUploads‘);"><a onclick="deleteImg1(this)"><img src="${ctxStatic}/images/close_hover.png" class="delete" /></a></div>
<input type="file" name="files" id="fileToUploads" onchange="previewImgs(this, ‘imgFiles‘)" style="display:none;">
</td>
</tr>
</table>