學習記錄
實現本地圖片上傳和預覽
切記使用 accept=“image/*” 可以指定文件類型
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="mine_header_upload" id="mine_header_upload" accept="image/*" @change="head_upload()">
<label for="mine_header_upload" id="mine_header">
<img src="./img/d_header.png" alt="" >
</label>
</form>
這裏將 input 設置透明度0 ，利用label標籤，實現點擊圖片選擇本地圖片並上傳
#mine_header_upload{
opacity: 0;
}
head_upload(){
let obj= document.getElementById("mine_header_upload");
let img = document.getElementById("mine_header").getElementsByTagName("img")[0];
var newsrc = this.getObjectURL(obj.files[0]);
img.src=newsrc;
},
getObjectURL(file) {
var url = null ;
// 下面函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
使用vue組件，全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
#mine_header_upload{
opacity: 0;
}
</style>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="mine_header_upload" id="mine_header_upload" accept="image/*" @change="head_upload()">
<label for="mine_header_upload" id="mine_header">
<img src="./img/d_header.png" alt="" >
</label>
</form>
<script>
var app = new Vue({
methods: {
head_upload(){
let obj = document.getElementById("mine_header_upload");
let img = document.getElementById("mine_header").getElementsByTagName("img")[0];
var newsrc = this.getObjectURL(obj.files[0]);
img.src=newsrc;
},
getObjectURL(file) {
var url = null ;
// 下面函數執行的效果是一樣的，只是需要針對不同的瀏覽器執行不同的 js 函數而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
},
}).$mount("#container");
</script>
</body>
</html>