js實現圖片本地上傳預覽

時間 2019-12-18

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上傳照片</title>
<style type="text/css">
.form-list {
margin-left: 15px;
height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative; }
.form-list:last-of-type {
border-bottom: none; }
.form-list > label {
color: rgba(41, 43, 51, 0.5);
padding: 19px 0px 20px;
display: inline-block;
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px; }
.form-list input {
border: none;
outline: none;
margin-bottom: 0; }
.form-list input[name='txt'] {
height: 59px;
color: #292b33;
font-size: 16px; }
.form-list > span {
position: absolute;
right: 15px; }
.form-list > span i {
font-style: normal; }javascript

.photo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.photo-box .photo-div {
display: none;
clear: both;
min-height: 48px;
min-width: 48px; }
.photo-box .photo-div .photo-iterm {
position: relative;
float: left;
margin-right: 15px; }
.photo-box .photo-div .photo-iterm img {
width: 48px;
height: 48px;
border-radius: 5px;
display: block; }
.photo-box > label {
display: block;
width: 48px;
height: 48px;
border-radius: 5px;
background: #EFEFF4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
color: rgba(41, 43, 51, 0.4);
float: left; }
.photo-box input {
visibility: hidden;
width: 1px;
height: 1px; }
</style>
</head>
<body>
<div class="form-list">
<label class="fs-16">專業資質*</label>
<div class="photo-box">
<div class="photo-div" id="profession-preview">

</div>
<label for="t-profession">+</label>
<input type="file" id="t-profession" multiple="multiple"/>

</div>
<span class="fs-14 fc-4"><i id="img-num">0</i>/3</span>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
var profession_preview = document.getElementById('profession-preview');
var pro_oFile = document.querySelector('#t-profession');
console.log(pro_oFile)
//打印出input自己，
// console.log(pro_oFile.files)
//
//上傳專業資質
pro_oFile.onchange = function(){
//支持多選
console.log(pro_oFile.files)
// 0:File(13387) {name: "1b2055cd16427bfac50b98a4f505ad27.jpeg", lastModified: 1516166092650, lastModifiedDate: Wed Jan 17 2018 13:14:52 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 13387, …}
var num=$(profession_preview).children('.photo-iterm').length
console.log(num)
//第一次上傳後是0，以後依次1，2，遞增，要與索引值比較就要倒過來
if(num<3){
var less = (3-parseInt(num))
//當圖片個數超過3個時，不會再執行appendTo事件，因此要有個數和索引值比較，索引值最大是2，因此超過2時不執行
console.log(less)
$.each(pro_oFile.files,function(j,item){
//遍歷循環能夠在每次input改變時得到當前列表的索引值，便可以得到當前最大的索引值，事件每次執行一次，就遍歷（查）一次
if(parseInt(less) > j){
var url = window.URL.createObjectURL(item);
var img = new Image();
img.src = url;
var photo_iterm='';
photo_iterm+='<div class="photo-iterm">'+
'<img src="'+img.src+'"/>'+
'<span class="img-delete"></span>'+
'</div>'
// 插入預覽圖片
profession_preview.style.display='flex';
$(photo_iterm).appendTo(profession_preview)
}
})
}
imgNum()
}
//圖片數量變化
function imgNum(){
var professionLen= $(profession_preview).children('.photo-iterm').length
$('#img-num').text(professionLen)

if(professionLen>=3){
$(profession_preview).siblings('label').hide()
}else{
$(profession_preview).siblings('label').show()
}
}
})

</script>
</html>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。