<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传及预览放大镜效果</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="zyupload/skins/zyupload-1.0.0.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="zyupload/zyupload-1.0.0.js"></script>
</head>
<body>
<div class="uploadPicture_div">
<!--上传图片区域开始-->
<div id="zyupload" class="zyupload" style="display: block;"></div>
<!--上传图片区域结束-->
</div>
<!--图片预览区域开始-->
<div class="pictureShow_div">
<!--图片块开始-->
<div class="picture_div">
<!--删除层开始-->
<div class="del_div">
<span class="file_del " title="删除 "></span>
</div>
<!--删除层结束-->
<!--图片-->
<img src="img/1111.jpg" />
</div>
<!--图片块结束-->
<div class="picture_div">
<div class="del_div">
<span class="file_del " title="删除 "></span>
</div>
<img src="img/34.jpg" />
</div>
<div class="picture_div">
<div class="del_div">
<span class="file_del " title="删除 "></span>
</div>
<img src="img/34134083_1399872358299_mthumb.jpg" />
</div>
</div>
<!--图片预览区域结束-->
<script>
var imgSrcArr = new Array(); //图片src数组
var currIndex; //当前图片下标
$(function() {
// 初始化插件
$("#zyupload").zyUpload({
width: "100%", // 宽度
height: "auto", // 宽度
itemWidth: "110px", // 文件项的宽度
itemHeight: "120px", // 文件项的高度
url: "url", // 上传文件的路径
fileType: ["jpg", "png", "jpeg", "bmp"], // 上传文件的类型
fileSize: 51200000, // 上传文件的大小
multiple: true, // 是否可以多个文件上传
dragDrop: false, // 是否可以拖动上传文件
tailor: true, // 是否可以裁剪图片
del: true, // 是否可以删除文件
finishDel: true, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(selectFiles, allFiles) { // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function(file, files) { // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function(file, response) { // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
//$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
},
onFailure: function(file, response) { // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function(response) { // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
alert("文件上传完成");
}
});
getImgSrcArr(); //进入页面先加载已有图片
});
/*获取图片src数组*/
function getImgSrcArr() {
/*先清空数组*/
if (imgSrcArr.length > 0) {
imgSrcArr.splice(0, imgSrcArr.length);
}
/*向数组中添加src*/
$(".pictureShow_div img").each(function() {
imgSrcArr.push(this.src);
//alert(this.src)
});
}
/*点击图片预览*/
$(".pictureShow_div img").bind('click', function() {
/*当前图片的下标*/
currIndex = $(this).index(".pictureShow_div img");
//alert(currIndex);
showImg(imgSrcArr[currIndex]); //预览图片
});
/*显示弹出层图片*/
function showImg(imgSrc) {
/*预览当前图片*/
$("body").zyPopup({
src: imgSrc, // 图片的src路径
});
if (imgSrcArr.length == 1) {
$("#zoom .next").hide();
$("#zoom .previous").hide();
} else {
if ((currIndex + 1) == imgSrcArr.length) {
//没有下一张图片 隐藏下一张图片按钮
$("#zoom .next").hide();
} else if (currIndex == 0) {
//没有上一张图片 隐藏上一张图片按钮
$("#zoom .previous").hide();
}
}
nextImg();
prevImg();
zoomImg(imgSrc);
}
/*查看下一张图片*/
function nextImg() {
// 弹出层下一张的点击事件
$("#zoom .next").bind("click", function() {
//alert(1)
nextIndex = currIndex + 1;
//显示下一张
$("body").zyPopup({
src: imgSrcArr[nextIndex], // 图片的src路径
});
currIndex = nextIndex;
/*判断是否还有下张图片*/
if ((currIndex + 1) >= imgSrcArr.length) {
//没有下一张图片 隐藏下一张图片按钮
$("#zoom .next").hide();
}
nextImg()
prevImg()
zoomImg(imgSrcArr[nextIndex]);
});
}
/*查看上一张图片*/
function prevImg() {
// 弹出层下一张的点击事件
$("#zoom .previous").bind("click", function() {
//alert(1)
prevIndex = currIndex - 1;
//显示下一张
$("body").zyPopup({
src: imgSrcArr[prevIndex], // 图片的src路径
});
currIndex = prevIndex;
/*判断是否还有下张图片*/
if ((currIndex) == 0) {
//没有上一张一张图片 隐藏上一张图片按钮
$("#zoom .previous").hide();
}
nextImg()
prevImg()
zoomImg(imgSrcArr[prevIndex]);
});
}
/*鼠标悬停时显示删除层*/
$(".picture_div").hover(
function() {
$(this).children(".del_div").fadeIn(100);
},
function() {
$(this).children(".del_div").fadeOut(100);
}
)
/*删除当前图片 这里是删除整个图片层代码*/
$(".del_div span").bind('click', function() {
var img = $(this).parent().siblings("img")[0].src;
//alert(img)
$(this).parent().parent().remove();
getImgSrcArr();
});
/*图片放大镜*/
function zoomImg(imgSrc) {
// 定义图像的实际尺寸、
var native_width = 0;
var native_height = 0;
var img_obj = new Image();
img_obj.src = imgSrc;
//alert(imgSrc);
//记载背景图片
$(".large").css({
"background-image": "url(" + imgSrc + ")"
});
// 在这里这段代码写在这里是非常有必要的、
// 如果在图像加载之前就访问的话、return的宽高值为0、
native_width = img_obj.width;
native_height = img_obj.height;
// 现在、我来开始写鼠标移动的函数、mousemove()
$('.content').mousemove(function(e) {
// 获得鼠标X轴和Y轴的坐标
// 先获得magnify相对与document的定位position
var magnify_offset = $(this).offset();
// 这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置 来得到鼠标的位置
var mouse_x = e.pageX - magnify_offset.left;
var mouse_y = e.pageY - magnify_offset.top;
// 现在、我们来调整一下放大镜的隐藏与显示、
if (mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height()) {
$('.large').fadeIn(100);
} else {
$('.large').fadeOut(100);
}
if ($('.large').is(':visible')) {
var rx = Math.round(mouse_x / $('#tailorImg').width() * native_width - $('.large').width() / 2) * -1;
var ry = Math.round(mouse_y / $('#tailorImg').height() * native_height - $('.large').height() / 2) * -1;
var bgp = rx + 'px ' + ry + 'px';
// 现在我们应该来写放大镜跟随鼠标的效果、
// 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
// 再减去放大镜宽高的一半、保证放大镜的中心�
图片上传和预览放大镜效果.zip （43个子文件） 
图片上传和预览放大镜效果 css 
base.css 1KB img 
34.jpg 100KB 34134083_1399872358299_mthumb.jpg 127KB 1111.jpg 292KB
index.html 8KB js jquery.min.js 82KB .project 998B zyupload zyupload-1.0.0.min.js 34KB zyupload.tailor-1.0.0.min.js 34KB zyupload.drag-1.0.0.js 59KB zyupload.basic-1.0.0.min.js 14KB zyupload.drag-1.0.0.min.js 34KB .project 384B zyupload.tailor-1.0.0.js 60KB skins images 
next_arrow.png 1KB fileType swf.png 3KB pdf.png 2KB ttf.png 3KB ppt.png 3KB file.png 2KB zip.png 3KB xls.png 3KB txt.png 3KB rar.png 3KB psd.png 3KB add_img.png 3KB del.png 3KB prev_arrow.png 1KB edit.png 744B success.png 2KB delete_blue.png 627B bg.png 6KB delete_white.png 447B close.png 1KB
Jcrop.gif 329B edit_white.png 434B finish.png 4KB edit_blue.png 555B loading.gif 6KB zyupload-1.0.0.css 12KB zyupload-1.0.0.min.css 9KB zyupload-1.0.0.js 61KB zyupload.basic-1.0.0.js 29KB资源评论
