這個問題在這里已經有了答案： 將影像從 <input file> 加載到 <img> （6 個回答） 12 分鐘前關閉。
所以我想<img src="">使用 JavaScript設定屬性，但源將是輸入元素值。
<img src="" id="userImage" onclick="changeImage()">
<input type="file" id="imageInput">
function changeImage() {
var userImage = document.getElementById("imageInput").value;
document.getElementById("userImage").src = userImage;
}
注意：<input type="image">對我不起作用，因為它不顯示選擇影像的視窗。
當我打開控制臺時，它顯示
Failed to load resource:
net::ERR_UNKNOWN_URL_SCHEME
uj5u.com熱心網友回復：
您可以使用FileReader將輸入作為 a 讀取dataURL，然后將該 url 附加為imagesrc
function read(val) {
const reader = new FileReader();
reader.onload = (event) => {
document.getElementById("divOutput").src = event.target.result;
}
reader.readAsDataURL(val.files[0]);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File uploader</title>
<script src="./script.js" defer></script>
</head>
<body>
<h1>My file uploader</h1>
<input type='file' id='userImage' onchange = "read(this)">
<img id='divOutput'></div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319116.html
標籤：javascript html 图片 输入类型文件
上一篇：Javascript函式被截斷？
下一篇：在美麗的湯網路抓取中一無所獲