input[type="file"]上傳圖片並顯示圖片
阿新 • • 發佈：2020-08-19
input[type="file"]上傳圖片並顯示圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.fileBox{
padding: 40px 0 20px 0;
}
.fileInfo{
font-size: 14px;
margin-bottom: 20px;
}
.close{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
background: url('img/close.svg') no-repeat center center;
z-index: 99;
}
.baseImg{
width: 200px;
height: 200px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.inputBox{
width: 200px;
height: 200px;
position: relative;
margin-bottom: 30px;
cursor: pointer;
}
.fileInput{
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.add{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
border: 2px solid #9CC7F2;
font-size: 40px;
color: #B4B4B4;
}
</style>
</head>
<body>
<div class="fileBox">
<div class="fileInfo">第一張圖</div>
<div class="inputBox">
<i class="close hide" id="close1"></i>
<input type="file" name="pic" class="fileInput" id="pic1" accept="image/gif,image/jpg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" />
<img src="" alt="" id="inputImg1" class="baseImg hide"/>
<div class="add" id="add1">+</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
function inputChange(picId,imgId,addId,closeId){
var files = document.getElementById(picId).files;
console.log(files);
if(files.length == 0) return;
var form = new FormData(),
file = files[0];
form.append('file', file);
var reader = new FileReader();
reader.readAsDataURL(file); //base64
//接收到圖片時觸發onload
reader.onload = function(e){
var result = reader.result;
console.log(result);
document.getElementById(imgId).src = result;
document.getElementById(imgId).classList.remove('hide');
document.getElementById(addId).classList.add('hide');
document.getElementById(closeId).classList.remove('hide');
};
// $.ajax({
// url: '/upload',
// type: 'POST',
// cache: false,
// data: formData,
// processData: false,
// contentType: false
// }).done(function(res) {
//
// }).fail(function(res) {});
}
// document.getElementById('pic1').addEventListener('click', function() { this.value = ''; }, false);
$(function(){
$('.close').click(function(){
$(this).addClass('hide');
$(this).siblings('.add').removeClass('hide');
$(this).siblings('img').addClass('hide');
})
})
</script>
</body>
</html>