html 使用input file上传图片并显示

2024-06-12 20:16:01
开发
10

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>文件上传</title>

</head>

<body>

<div id="app">

<input type="file" name="" id="input_img" />

<div id="show_img" style="width: 400px;height: 400px;display: flex;align-items: center;justify-content: center;overflow: hidden;"></div>

</div>

<script>

var getUserPhoto = document.getElementById("input_img");

getUserPhoto.onchange = function () {

var file = this.files;

console.log(file);

var reader = new FileReader();

reader.readAsDataURL(file[0]);

reader.onload = function () {

var image = document.createElement("img");

image.width = "400";

image.src = reader.result;

var showPicture = document.getElementById("show_img");

showPicture.append(image);

};

};

</script>

</body>

</html>

原文地址:https://blog.csdn.net/lfl18326162160/article/details/139493600 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1800864632475357184.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部