<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.sou-upload{
list-style: none;
margin:0;
padding: 0;
}
.sou-upload li{
cursor: pointer;
float: left;
margin-right: 15px;
45px;
height: 46px;
overflow: hidden;
}
.sou-upload li input{
display: none;
}
.sou-upload li img{
max- 100%;
}
</style>
</head>
<body>
<ul class="sou-upload" id="sou-upload">
<li>
<input type="file" id="sou-upload1" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload1]').click();" >
</li>
<li>
<input type="file" id="sou-upload2" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload2]').click();" >
</li>
<li>
<input type="file" id="sou-upload3" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload3]').click();" >
</li>
<li>
<input type="file" id="sou-upload4" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload4]').click();" >
</li>
</ul>
<script>
$(".sou-upload li").each(function(index, el) {
var fileUl=document.getElementById('sou-upload');
var file=fileUl.getElementsByTagName('li')[index];
file.getElementsByTagName('input')[0].onchange=function(){
var fileList = this.files;
var imgObjPreview = this.parentNode.getElementsByTagName('img')[0];
if (this.files && this.files[0]) {
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(this.files[0]);
}
else {
//IE下，使用滤镜
this.select();
var imgSrc=this.value; //这里的imgsrc地址直接拿的input的
var localImagId = this.parentNode.getElementsByTagName('img')[0];
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
imgObjPreview.src=imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
document.selection.empty();
}
return true;
}
});
</script>
</body>
</html>