<!DOCTYPE html>
<html>
<head>
<title>jQuery+svg多张图片同时上传预览代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/svg.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
body {
background: #efd;
}
section {
width: 1200px;
margin: 200px auto;
}
article {
border: 1px solid #ccc;
padding: 20px;
}
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.item {
float: left;
position: relative;
margin: 20px;
}
.addImg {
width: 190px;
height: 190px;
}
.upload_input {
display: none;
}
.preview {
position: absolute;
width: 190px;
height: 190px;
left: 0;
top: 0;
}
.click {
position: absolute;
width: 190px;
height: 190px;
left: 0;
top: 0;
z-index: 1;
cursor: pointer;
}
.delete {
position: absolute;
right: -2rem;
top: -1rem;
cursor: pointer;
display: none;
}
.preview img {
width: 100%;
height: 100%;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<section>
<h2>svg制作多图上传</h2>
<article>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onChange="preview(this)">
<div class="preview"></div>
<div class="click" onClick="loadImg(this)"></div>
<div class="delete" onClick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
<div style="clear: left;"></div>
</article>
</section>
<script type="text/javascript">
//选择图片
var loadImg = function(obj){
$(obj).parent().find(".upload_input").click();
}
//删除
var deleteImg = function(obj){
$(obj).parent().find('input').val('');
$(obj).parent().find('.preview').html('');
$(obj).hide();
}
</script>
<!-- 预览 -->
<script type="text/javascript">
function preview(file) {
var prevDiv = $(file).parent().find('.preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.html('<img src="' + evt.target.result + '" />');
}
reader.readAsDataURL(file.files[0]);
} else {//IE
prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
}
$(file).parent().find('.delete').show();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>