移动端 js图片上传预览！

作者: 科哚洛夫 | 来源:发表于2018-05-08 16:45 被阅读177次

移动端 js图片上传预览！
iOS 照片上传服务器旋转90度解决办法
移动端Vue.js图片预览插件
移动端图片上传预览进度显示
extension
js图片上传预览
JS图片上传预览
移动端多图片上传并本地预览
Laravel 中 bootstrap fileinput 图
CSS 图片最大边自适应

预览图走一波：

预览图1

预览图2

需要的快快保存留档哦或者下方复制即可
{ps: 里面的图在 iconfonnt 里面可以找到！}

css 部分
<style>
#it_btn{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.it_update{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border-radius: 50%;
transition: 600ms;
}
.it_file{
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
opacity: 0;
font-size: 100px;
}
.it_item{
display: block;
position: absolute;
left:0;
right:0;
width: 100%;
height: 100%;
line-height: 250px;
text-align: center;
border-radius: 50%;
background: #fae04d;
color:#000;
font-size: 18px;
font-weight: 400;
box-shadow: 0px 9px 560px #f8db58;
transition: 1s;
}
.it_item:hover{
background: #877223;
box-shadow: 0px 5px 560px #847323;
}
.iconfont:before{
content:"\e611";
display: inline-block;
font-size: 39px;
position: absolute;
top: -50px;
left: 76px;
}
.param{
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: -1;
opacity: 0;
transition: 600ms;
}
.param a{
display: block;
position: absolute;
bottom: 10px;
z-index: 99;
width: 157px;
height: 45px;
line-height: 45px;
text-align: center;
background: #f9e34f;
color: #000;
letter-spacing: 2px;
border-radius: 5px;
box-shadow: 0 5px 20px #847323;
transition: 600ms;
}
.param > .iconfont:before{
content:"\e65f";
display: inline-block;
position: absolute;
top: 0;
font-size: 30px;
left: -40%;
color: #fff;
transition: 600ms;
}
.param > .iconfont:before:active{
color: #f9e34f;
font-size: 35px;
}
a:link,
a:active,
a:visited,
a:hover {
/* background: none; /
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.param a:active{
width: 150px;
height: 43px;
font-size:15px;
}
#img{
max-width: 100%;
max-height: 70vh;
}
.it_opb{
position: fixed;
left: 20px;
bottom: 45px;
z-index: -99;
}
</style>
</head>
<body>
<div id="page">

<div id="it_btn">
<div class="it_update">
<input id="yourInputId" type="file" accept="image/" onchange="upload('#yourInputId', '#img');" capture="camera" class="it_file">
<a href="javascript:;" class="it_item iconfont" id="it_item" onclick="takephoto();">拍照上传</a>
</div>
</div>

<div class="param">
<img src="" alt="" id="img">
<a href="#">下一步</a>
<span href="#" class="iconfont it_opb"></span>
</div>
</div>

js部分
<script src="js/jquery.js"></script>

<script type="text/javascript">
function takephoto() {
$(".it_item").addClass("animated pulse");
setTimeout(test, 1000);
}
// 调用相机
function test() {
$("#yourInputId").click();
}
// return
$(".it_opb").on('click',function() {
$(".param").css({'z-index':'-1','opacity':'0'});
})
</script>
<script type="text/javascript">
// 上传
function upload(c, d){
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$(".param").css({'z-index':'99','opacity':'1'});
$d.setAttribute("src", e.target.result); };
};
</script>
</body>
</html>