我有以下代碼：function displayImg() { let fileUpload = document.getElementById("fileUpload").value; let container document.getElementById("container"); container.innerHTML = `<img src="fileUpload">` }<input type = file id = "fileUpload" accept = "image/*"><button onclick = "displayImg()">Click to show</button><div id="container"></div>我希望用戶可以將文件輸入到文件輸入字段中，并在單擊按鈕時將其放入動態創建的圖像的源中。我該怎么做呢？
2 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
你可以試試這個
<html>
<body>
<input type = file id = "fileUpload" accept = "image/*">
<button onclick = "displayImg()">Click to show</button>
<div id="container">
<img id="img"></div>
<script>
function displayImg() {
let fileUpload = document.getElementById("fileUpload").value;
//alert(fileUpload);
let image = document.getElementById("img");
img.src = fileUpload;
}
</script>
</body>
</html>
注意：該value屬性僅返回文件名，因此圖像應與代碼位于同一文件夾中?；蛘?，如果您愿意，可以在之前添加文件的路徑。
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
請使用以下代碼：
var uploadedFileURL;
function handleFile() {
var fileUploadControl = document.getElementById('fileUpload');
var file = fileUploadControl.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function() {
uploadedFileURL = reader.result;
};
reader.readAsDataURL(file);
}
}
function displayImg() {
var fileUpload = document.getElementById("fileUpload").value;
var container = document.getElementById("container");
container.innerHTML = `<img src="${uploadedFileURL}">`;
}
<input id="fileUpload" type="file" onchange="handleFile()" accept="image/*" />
<button onclick="displayImg()">Click to show</button>
<div id="container"></div>
- 2 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消