HTML5 <input>添加多张图片，可点击弹窗放大。限定4张，可删除。

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

<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--;
}
}

上传数据库，见下篇

转载于:https://www.cnblogs.com/ymcatblog/p/6183146.html