Der Inhalt dieses Artikels besteht darin, die Echtzeit-Bildvorschaufunktion mithilfe von JavaScript mitzuteilen. Sie hat einen gewissen Referenzwert >FileReader zum Abrufen von Base64-Code und Vorschau
Verwandte Empfehlungen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
width: 170px;
height: 170px;
border: 1px solid lightgray;
}
.img>img{
width: 170px;
height: 170px;
}
</style>
</head>
<body>
<input type="file" id="file">
<p class="img">
<img src="" alt="" id="img">
</p>
<script>
window.onload=function () {
/*请将input的id设为file img标签的id设为img**/
var file=document.getElementById('file');
var img=document.getElementById('img');
var dataImg;
file.onchange=function () {
//判断是否支持FileReader
if(typeof FileReader==="undefined"){
alert('您的浏览器不支持');
}
//读取文件
var result=this.files[0];
//获取文件类型
var type=result.type;
if(!type){
alert('请上传图片');
}else {
//判断图片类型
type=type.split('/')[1];
console.log(type);
//使用正则匹配判断是否是jpeg,jpg,png,bmp,gif图片类型
if(type.match(/^(jpg|bmp|png|jpeg|gif)$/g)){
console.log(result);
//声明一个fileReader
var reader=new FileReader();
//以数据流的形式读取图片
reader.readAsDataURL(result);
//图片读取完毕后执行操作
reader.onload=function (e) {
//获取图片读取结果
dataImg=this.result;
//加载图爿到标签上
img.setAttribute('src',dataImg);
};
}
else {
alert("请上传图片格式");
//清空input
this.value='';
}
}
}
}
</script>
</body>
</html>Vorderseite -end-Implementierung der Echtzeitvorschau beim Hochladen von Bildern Zwei Möglichkeiten zum Hochladen von Bildern
Echtzeitvorschau von Bildern hochladen
js: Implementierung Sofortige Vorschau der hochgeladenen Bilder
Das obige ist der detaillierte Inhalt vonJavaScript implementiert eine Bildvorschaufunktion in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
