学习记录
实现本地图片上传和预览
切记使用 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>
