您的位置：首页 > 其它

非兼容ie，上传图片demo

2016-08-17 17:57 148 查看

</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.upload {
width: 114px;
height: 143px;
margin-right: 20px;
}

.upload .upload-body {
background: #f6f7f8;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align: center;
width: 114px;
height: 143px;
position: relative;
float: left;
cursor: pointer;
}

.upload .upload-body a {
display: block;
cursor: pointer;
text-decoration: underline;
padding-top: 45px;
padding-bottom: 25px;
}

.upload .upload-body span {
display: block;
color: #9c9c9c;
cursor: pointer;
}

.upload .upload-body img {
cursor: pointer;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: none;
}

.upload .upload-body input {
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
font-size: 500px;
cursor: pointer;
overflow: hidden;
}
</style>
</head>

<body>
<div class="upload-wrap">
<div class="upload">
<div class="upload-body">
<a style="text-decoration: none;">+资质证书</a>
<span>不超过500KB</span>
<img src="" id="up-img" >
<input type="file" id="touxiangfile" size="" name="touxiangfile" onchange="showPreview(this)">
</div>
</div>
</div>
</body>
<script src="jQuery v1.11.3.min.js"></script>
<script>
function showPreview(source){
var showImgUrl = "", file = source.files[0];
if(window.FileReader){
var fr = new FileReader();
fr.onloadend=function(e){
$("#up-img").prop("src",e.target.result).css("display","block");
showImgUrl = e.target.result
}
fr.readAsDataURL(file)
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 上传图片可见 base64

相关文章推荐

新的分享

章节导航