查考链接
jquery多图片上传预览demo效果示例（整理）
实现jquery双击图片放大
两个示例中的代码合并在一起就可以实现图片上传并放大预览，但我的示例中文件必须上传到后台，返回图片的路径后才能实现放大预览功能。
代码中将需要上传的部分给注释掉了，如果需要完整的功能这需要有一个文件上传接口，同时需要接口返回文件名以及文件路径（放在浏览器中可以直接打开的），现在仅可以实现图片显示出来无法放大。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery多图片上传预览</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.imageDiv {
display: inline-block;
width: 160px;
height: 130px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px dashed darkgray;
background: #f8f8f8;
position: relative;
overflow: hidden;
margin: 10px
}
.cover {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width:30px;
height:30px;
/* background-color: red; */
/* display: none; */
text-align: center;
cursor: pointer;
color: #fff;
}
.coverr {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 130px;
/* background-color: rgba(0, 0, 0, .3); */
/* display: none; */
line-height: 125px;
text-align: center;
cursor: pointer;
}
.cover .delbtn {
font-size: 14px;
}
.coverr.look {
color: red;
font-size: 20px;
}
.imageDiv .coverr i {
display: none;
color: gainsboro;
}
.imageDiv .cover i {
color: black;
}
.imageDiv:hover .cover {
display: block;
}
.imageDiv:hover .coverr {
/* display: block; */
background-color: rgba(0, 0, 0, .3);
}
.imageDiv .coverr i{
display: none;
}
.imageDiv .coverr:hover i{
display: block;
}
.addImages {
display: inline-block;
width: 160px;
height: 130px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px dashed darkgray;
background: #f8f8f8;
position: relative;
overflow: hidden;
margin: 10px;
}
.text-detail {
margin-top: 40px;
text-align: center;
}
.text-detail span {
font-size: 40px;
}
.file {
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 130px;
opacity: 0;
}
</style>
</head>
<body>
<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart="">
<div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;">
<div id="innerdiv" style="position: absolute;">
<img id="bigimg" style="border: 5px solid #fff;" src="" />
</div>
</div>
<!--点击预览图片-->
<div id="Pic_pass">
<p><span style="color: red">注：每张照片大写不可超过4M，且最多可以传十张</span></p>
<div class="picDiv">
<div class="addImages">
<!--multiple属性可选择多个图片上传-->
<input type="file" class="file" id="fileInput" multiple="" accept="image/png, image/jpeg, image/gif, image/jpg">
<div class="text-detail">
<span>+</span>
<p>点击上传</p>
</div>
</div>
</div>
</div>
<div class="msg" style="display: none;"></div>
</form>
<script>
$("#fileInput").change(function() {
//获取选择图片的对象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
UploadPreview(docObj,picDiv);
});
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型
function UploadPreview(docObj,picDiv) {
//得到所有的图片文件
var fileList = docObj.files;
//循环遍历
for (var i = 0; i < fileList.length; i++) {
var data= new FormData();
var file= fileList[i];
//photoTypez 定义上传图片文件夹类型 上传文件，将代码打开
// comm.partAccessURL为后台url
//result.fileName 后台返回的图片名称
//file.name 文件上传时的名称
// var pType = photoTypez;
// data.append('file',docObj.files[i]);
// if(pType != null && pType != '' && pType != undefined){
// data.append('type',pType);
// }else{
// data.append('type',0);
// }
// comm.postAjaxFileAsync("/api/common/uploadByType", data, function (result) {
// //动态添加html元素
// var picHtml = "<div class='imageDiv' id='div"+file.name+"'> <img id='img" + file.name +
// "' name='" + result.fileName + "' /> "+
// "<div class='coverr'><i class='look' onclick=\"Big(\'" +comm.partAccessURL+"/api" + result.fileName +"\')\" >查看</i></div>"+
// "<div class='cover'><i class='delbtn' onclick=\"delct(\'div" + file.name +"\')\" >X</i></div></div>";
// picDiv.prepend(picHtml);
// var imgObjPreview = document.getElementById("img" + file.name);
// if (fileList && file) {
// //图片属性
// imgObjPreview.style.display = 'block';
// imgObjPreview.style.width = '160px';
// imgObjPreview.style.height = '130px';
// //imgObjPreview.src = docObj.files[0].getAsDataURL();
// //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
// if (userAgent.indexOf('MSIE') == -1) {
// //IE以外浏览器
// imgObjPreview.src = window.URL.createObjectURL(file); //获取上传图片文件的物理路径;
// // console.log(imgObjPreview.src);
// // var msgHtml = '<input type="file" id="fileInput" multiple/>';
// } else {
// //IE浏览器
// if (docObj.value.indexOf(",") != -1) {
// var srcArr = docObj.value.split(",");
// imgObjPreview.src = srcArr[i];
// } else {
// imgObjPreview.src = docObj.value;
// }
// }
// }
// });
//不将图片文件上传到后台，用于测试使用，如果要用到项目中并且保存图片请使用上面代码
//使用这个就无法使用预览功能，因为图片上的属性没有可以直接打开的连接
var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name +
"' /><div class='coverr'><i class='look' onclick=\"Big(this)\" >查看</i></div><div class='cover'><i class='delbtn'>X</i></div></div>";
console.log(picHtml);
picDiv.prepend(picHtml);
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img" + fileList[i].name);
if (fileList && fileList[i]) {
//图片属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '160px';
imgObjPreview.style.height = '130px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
if (userAgent.indexOf('MSIE') == -1) {
//IE以外浏览器
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
console.log(imgObjPreview.src);
// var msgHtml = '<input type="file" id="fileInput" multiple/>';
} else {
//IE浏览器
if (docObj.value.indexOf(",") != -1) {
var srcArr = docObj.value.split(",");
imgObjPreview.src = srcArr[i];
} else {
imgObjPreview.src = docObj.value;
}
}
}
}
}
function htmlPut(result) {
}
function delct(id) {
document.getElementById(id).remove();
}
function Big(obj) {
imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);
}
//使用后台文件上传是使用这个方法
function imgShow(outerdiv, innerdiv, bigimg, obj) {
var src = obj;//获取图片路径
$(bigimg).attr("src", src);//设置#bigimg元素的src属性
/*获取当前点击图片的真实大小，并显示弹出层及大图*/
// $("<img/>").attr("src", src).load(function () {
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
console.log("当前窗口宽度" + windowW + "当前窗口高度" + windowH);
// var realWidth = this.width;//获取图片真实宽度
// var realHeight = this.height;//获取图片真实高度
var realWidth = 160;//获取图片真实宽度
var realHeight = 130;//获取图片真实高度
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*3;
// imgHeight = realHeight*3;
imgWidth = windowW * scale;
imgHeight = windowH * scale;
}
$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
$(bigimg).css("height", imgHeight);//以最终的高度度对图片缩放
var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
$(outerdiv).css("z-index",9999);
$(innerdiv).css({ "top": h, "left": w });//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
// });
$(outerdiv).click(function () {//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
</script>
</body>
</html>
保存获取图片的路径
var pictures=[];
var picDiv = $(".addImages");
var images =picDiv.prevObject[0].images;
//images为数组类型，下标直接取就可以
回显图片，在显示数据的同时将图片存储的路径名获取到循环显示
//pictures 为图片路径的数组
//comm.partAccessURL为后台的url
var picDiv = $("#fileInput").parents(".picDiv");
for (let i = 0; i < pictures.length; i++) {
var picHtml = "<div class='imageDiv' id='div"+pictures[i]+"'> <img id='img" + pictures[i] +
"' name='"+ pictures[i] +"' src='"+comm.partAccessURL+"/api" + pictures[i] +"' width='100%' height='100%' /> "+
"<div class='coverr'><i class='look' onclick=\"Big(\'" + comm.partAccessURL+"/api" + pictures[i] +"\')\" >查看</i></div>"+
"<div class='cover'><i class='delbtn' onclick=\"delct(\'div" + pictures[i] +"\')\">x</i></div></div>";
picDiv.prepend(picHtml);
}