下面例子最多上传六张图片,可以修改参数。在IE8和谷歌测试可用。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="picture01">
<div class="picDiv lastestPic">
<div class="localImg" id="localImg">
<img class="preview" id="preview" src="img/coverphoto.png" />
</div>
<div class="uploadBtn">
<input type="file" class="fileBtn" name="file" id="doc" οnchange="uploadPic(this);">
</div>
<div class="btnLine">
<div class="btnDiv" style="box-sizing: border-box;border-right: 1px solid #fff;">
<div class="btnWords" >预览</div>
</div>
<div class="btnDiv">
<div class="btnWords">设为主图</div>
</div>
</div>
<div class="delDiv">
<img class="delBtn" src="img/del.png""/>
</div>
</div>
</div>
</body>
</html>
js
//下面用于图片上传预览功能
function setImagePreview(docObj) {
var imgObjPreview = docObj.parentNode.parentNode.children[0].children[0];
if(docObj.files && docObj.files[0]) {
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = docObj.parentNode.parentNode.children[0];
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch(e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
function uploadPic(obj) {
var isSuccess = setImagePreview(obj);
var html = '<div class="picDiv lastestPic">' +
'<div class="localImg" id="localImg">' +
'<img class="preview" id="preview" src="img/coverphoto.png" />' +
'</div>' +
'<div class="uploadBtn">' +
'<input type="file" class="fileBtn" name="file" id="doc" οnchange="uploadPic(this);">' +
'</div>' +
'<div class="btnLine">' +
'<div class="btnDiv" style="box-sizing: border-box;border-right: 1px solid #fff;">' +
'<div class="btnWords" >预览</div>' +
'</div>' +
'<div class="btnDiv">' +
'<div class="btnWords">设为主图</div>' +
'</div>' +
'</div>' +
'<div class="delDiv">' +
'<img class="delBtn" src="img/del.png""/>' +
'</div>' +
'</div>';
var isLast = obj.parentNode.parentNode.classList.contains('lastestPic');
if(isSuccess) {
addClass(obj.parentNode.parentNode, "moreBtn");
}
if(isSuccess && isLast) {
if(obj.parentNode.parentNode.parentNode.children.length < 6) {
removeClass(obj.parentNode.parentNode, "lastestPic");
$(".picture01").append(html);
}
}
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(elements, cName) {
if(!hasClass(elements, cName)) {
elements.className += " " + cName;
}
}
function removeClass(elements, cName) {
if(hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换
}
}
css
.picture01{
width: 640px;
height: 150px;
float: left;
margin-left: 15px;
position: relative;
}
.picDiv{
width: 150px;
height:150px;
display: inline-block;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.picDiv .localImg{
width: 150px;
height:150px;
/*position: absolute;
top: 0;
left: 0;
overflow: hidden;
cursor: pointer;*/
}
.picDiv .uploadBtn{
width: 150px;
height:150px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
cursor: pointer;
}
.picDiv .localImg .preview{
width: 100%;
height: 100%;
}
.picDiv .btnLine{
width: 100%;
height: 25px;
margin-top: 10px;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.70);
display: none;
}
.moreBtn:hover .btnLine{
display: block;
}
.moreBtn:hover .delDiv{
display: block;
}
.picDiv .btnLine .btn1,.picDiv .btnLine .btn2{
width: 20px;
height: 20px;
cursor: pointer;
}
.picDiv .btnLine .btn1{
float: left;
margin-left: 10px;
}
.picDiv .btnLine .btn2{
float: right;
margin-right: 10px;
}
.picDiv .fileBtn{
width: 150px;
height: 150px;
opacity: 0;
cursor: pointer;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.btnLine .btnDiv{
width: 50%;
height: 100%;
display: inline-block;
float: left;
cursor: pointer;
text-align: center;
}
.btnLine .btnDiv .btnIcon{
display: inline-block;
float: left;
width: 15px;
height: 15px;
margin-left: 5px;
margin-top: 2px;
}
.btnLine .btnDiv .btnWords{
display: inline-block;
float: left;
font-size: 12px;
line-height: 25px;
color:#fff;
text-align: center;
width: 100%;
}
.picDiv .delDiv{
width: 15px;
height: 15px;
position: absolute;
right: 5px;
top:5px;
display: none;
cursor: pointer;
}
.picDiv .delDiv .delBtn{
width: 100%;
height: 100%;
}
.picDiv .btnLine .btnDiv:hover{
background-color: #000000;
}
实现效果如下
预览、主图、删除按钮函数未写,仅为样式。