<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>上传图片预览示例二</title>
<meta name="author" content="熊仔其人-2017年3月3日" />
<meta name="keywords" content="" />
<meta name="description" content="实际运用多张图片上传和预览，可设置默认图片，且可移除选择" />
<style type="text/css">
.image_container {
display: inline-block;
float: left;
}
#tdRoomPicture a, .image_container a {
text-align: center;
vertical-align: middle;
text-decoration: none;
}
a.addImg {
100px;
height: 100px;
line-height: 100px;
display: inline-block;
font-size: 50px;
background-color: #dae6f3;
}
.image_container a.previewBox {
background-color: #dae6f3;
margin: 0 3px 0 0;
display: none;
/*display: inline-block;*/
}
.image_container .delImg {
position: absolute;
color: #f00;
margin: 0 0 0 84px;
font-size: 16px;
16px;
height: 16px;
line-height: 16px;
text-align: center;
vertical-align: middle;
background-color: #c3c3c3;
}
.defaultImg {
border: 1px solid #f90303;
}
.defaultImg:before {
content: "默认图片";
float: left;
position: absolute;
color: #f90303;
font-size: 14px;
}
.defaultImg:after {
content: "";
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="Form1" method="post" enctype="multipart/form-data">
<div id="tdRoomPicture">
<!--<div class="image_container" data-picId="1">
<input id="RoomInfo1_RoomPicture1" name="RoomInfo1_RoomPicture1" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />
<input id="RoomInfo1_RoomPictureHidDefault1" name="RoomInfo1_RoomPictureHidDefault1" type="hidden" value="0" />
<a href="javascript:;" id="previewBox1" class="previewBox defaultImg">
<div class="delImg">×</div>
<img id="preview1" style="height: 100px; 100px; border- 0px;" />
</a>
</div>-->
<a href="javascript:;" class="addImg" data-picid="0">+</a>
</div>
</form>
<script type="text/javascript">
$(function () {
var picId = 0;
var pictureUploading = false;
$("#Form1").delegate(".addImg", "click", function () {
if (!!pictureUploading) return;
pictureUploading = true;
picId = parseInt($(this).attr("data-picId"));
picId++;
$(this).attr("data-picId", picId);
$(this).before("<div class="image_container" data-picId="" + picId + "">"
+ "<input id="RoomInfo1_RoomPicture" + picId + "" name="RoomInfo1_RoomPicture" + picId + "" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />"
+ "<input id="RoomInfo1_RoomPictureHidDefault" + picId + "" name="RoomInfo1_RoomPictureHidDefault" + picId + "" type="hidden" value="0" />"
+ "<a href="javascript:;" id="previewBox" + picId + "" class="previewBox">"
+ "<div class="delImg">×</div>"
+ "<img id="preview" + picId + "" style="height:100px;100px;border-0px;" />"
+ "</a>"
+ "</div>");
$("#RoomInfo1_RoomPicture" + picId).change(function () {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
$("#previewBox" + picId).css("display", "inline-block");
var $img = $("#preview" + picId);
//var $img = $("#preview1");
if (fileObj && fileObj.files && fileObj.files[0]) {
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src', dataURL);
} else {
dataURL = $file.val();
var imgObj = $img; //document.getElementById("preview");
// 两个坑:
// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
if (1 === picId) {
defaultImg(picId, true);
}
pictureUploading = false;
});
$("#RoomInfo1_RoomPicture" + picId).click();
//设置默认图片
$(".previewBox").click(function () {
var _picId = parseInt($(this).parent(".image_container").attr("data-picId"));
$(".image_container").each(function () {
var i = parseInt($(this).attr("data-picId"));
if (i === _picId)
defaultImg(i, true);
else
defaultImg(i, false);
});
});
//删除上传的图片
$(".delImg").click(function () {
var _picId = parseInt($(this).parent().parent(".image_container").attr("data-picId"));
$(".image_container[data-picid='" + _picId + "']").remove();
if ($(".image_container").length > 0 && $(".defaultImg").length < 1) {
$(".image_container").each(function () {
var i = parseInt($(this).attr("data-picId"));
defaultImg(i, true);
return false;
});
}
});
});
function defaultImg(picId, selected) {
if (!picId) return;
if (!!selected) {
$("#RoomInfo1_RoomPictureHidDefault" + picId).val(1);
$("#previewBox" + picId).addClass("defaultImg");
}
else {
$("#RoomInfo1_RoomPictureHidDefault" + picId).val(0);
$("#previewBox" + picId).removeClass("defaultImg");
}
}
});
</script>
</body>
</html>