点击弹窗放大，需要加入插件。

<link rel="stylesheet" href="css/photoswipe.css">

<link rel="stylesheet" href="css/default-skin.css">

<link rel="stylesheet" href="css/gallery.css">

<script type="text/javascript" src="js/guid.js"></script>

<script src="js/photoswipe.min.js"></script>

<script src="js/photoswipe-ui-default.min.js"></script>

<script src="js/photoSwipe.js"></script>

HTML：

div class="uploaderPhoto">

<ul id="photoUl" class="photoUl">

</ul>

<ul class="btnUl">

<li class="addLi">

<input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*">

</li>

</ul>

</div>

JS:

var _guid;

var imgCount=0;

$(document).ready(function(){

var guid = new GUID();

_guid=guid.newGUID();　

$(".uploaderPhoto ul li").width(li_width);

$(".uploaderPhoto ul li").height(li_height);

/*initImg();*/

$("#camera").change(function(e){

var files = e.target.files||e.dataTransfer.files;

if((imgCount+files.length)>4){

if(imgCount==0){

alert("只能选择"+(4-imgCount)+"张图片");

}else{

alert("只能再选择"+(4-imgCount)+"张图片");

}

return;

}

for (var i = 0; i < files.length; i++) {

imgCount++;

var file = files[i];

var reader = new FileReader();

reader.οnlοad=function(){

var imgId=guid.newGUID();;

var li=document.createElement("li");

li.id=imgId;

$(li).width(li_width);

$(li).height(li_height);

var html="<figure>"+

" <a href='"+this.result+"' data-size='800x1142' οnclick='setSelImg(\""+imgId+"\");'>" +

"<img src='"+this.result+"' style='width:"+li_width+"px;height:"+li_height+"px;' />" +

"</a>"+

"</figure>";

$(li).html(html);

/* $(li).insertBefore(".addLi");*/

$(li).appendTo("#photoUl");

initPhotoSwipeFromDOM('.photoUl');

}

reader.readAsDataURL(file);

if(imgCount==4){

//是否隐藏添加按钮

$(".btnUl").css("display","none");

}

}

});

});

//删除照片

var selImgId="";

function setSelImg(imgId){

selImgId=imgId;

}

function removeImg(){

if(confirm("确定要删除该照片吗？"))

{

$('#closeBtn').click();

var li=$("#"+selImgId);

li.remove();

imgCount--;

}

}

上传数据库，见下篇